Adding isSearchable to MUI Select with loadOptions breaks loading

[haydenlinder]

Scope: <DESCRIBE SCOPE OF THIS ISSUE, i.e.: PF4 mapper, Form renderer>

This is for MUI mapper.

Description

Adding isSearchable to MUI Select with loadOptions breaks loading. When you type your search, none of the options show up.

Schema

You can reproduce here by adding isSearchable: true.

export default {
  "fields": [
    {
      "component": "select",
      "label": "Select",
      "name": "select",
      "simpleValue": true,
      "options": [],
      "isSearchable": true,
      "loadOptions":  () =>
      new Promise((res) =>
        setTimeout(
          () =>
            res([
              { value: 'first-option', label: 'First async option' },
              { value: 'second-option', label: 'Second async option' }
            ]),
          2500
        )
      ) 
    }
  ]
};

<If it's possible, please provide a schema which reproduces the issue>

[Hyperkid123]

@haydenlinder thanks for the issue. This one is "fun".

The problem is this: c0eb916#diff-e562c6a6573e48431bc65138f034bae8830db07209229974efa6f1adc9736f8dR15

This was a change to move away from defaultProps to inline default props. However, there is one pretty big side effect.

Component.defaultProps props references never changes. But {options = []} in the function arguments changes on each render. And because [] !== [] it triggers a hook that resets the options to an empty array. We can get around it by using memo and deep equal function. But it's pretty sneaky and will be less efficient.

[rvsia]

🎉 This issue has been resolved in version 3.22.4 🎉

The release is available on

• react-form-renderer (@latest dist-tag)

• ant-component-mapper (@latest dist-tag)

• blueprint-component-mapper (@latest dist-tag)

• carbon-component-mapper (@latest dist-tag)

• mui-component-mapper (@latest dist-tag)

• pf4-component-mapper (@latest dist-tag)

• suir-component-mapper (@latest dist-tag)

Data-Driven-Forms.org!