search

data-driven-forms / react-forms

React library for rendering forms.
https://data-driven-forms.org/
Apache License 2.0
295 stars 85 forks source link

Adding `isSearchable` to MUI Select with `loadOptions` breaks loading #1448

Closed haydenlinder closed 5 months ago

haydenlinder commented 5 months ago

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 commented 5 months ago

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

The problem is this: https://github.com/data-driven-forms/react-forms/commit/c0eb916b817a7c2856ea5f47a659ffa47184808a#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 commented 5 months ago

:tada: This issue has been resolved in version 3.22.4 :tada:

The release is available on

Data-Driven-Forms.org!