fix(ui-simple-select): fix selection getting lost after options have changed

[matyasf]

Closes: INSTUI-4402

This bug was introduced by #1674

This issue came up when the Option's value and children differed.

TEST PLAN:
make a SimpleSelect where the Option's value and children are not the same. Select a child and remove a different element from the child list. Selection should stay. Test with this code:

const InnerComponent = ({ handleSelect, options, value }) => {
// should work here SimpleSelect.Option's value is opt.name too
  return (
    <SimpleSelect
      renderLabel="Controlled Select"
      value={value.toString()}
      onChange={handleSelect}
    >
      {options.map((opt) => (
        <SimpleSelect.Option
          key={opt.id}
          id={opt.id.toString()}
          value={opt.id.toString()}
        >
          {opt.name}
        </SimpleSelect.Option>
      ))}
    </SimpleSelect>
  );
};

const allOptions = [
  { id: 1, name: "Catalog 1" },
  { id: 2, name: "Catalog 2" },
];

const Example = () => {
  const [value, setValue] = useState(allOptions[0].id);
  const [skipSecond, setSkipSecond] = useState(false);

  const handleSelect = (e, { value }) => setValue(value);

  const options = allOptions.filter(
    (opt) => opt.id !== allOptions[1].id || !skipSecond
  );

  console.log(value, options);

  return (
    <>
      <InnerComponent
        handleSelect={handleSelect}
        options={options}
        value={value}
      />
      <Checkbox
        checked={skipSecond}
        label="Skip Second"
        onChange={() => setSkipSecond(!skipSecond)}
      />
    </>
  );
};

render(<Example />);

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-12-13 17:19 UTC

[balzss]

works well, nice job

[joyenjoyer]

nice one