:bug: fix(balSelect): NotFoundError when selected BalSelectOption is removed from filtered children

[glennverschooren]

Current Behavior

BalSelect crashes when React removes a currently selected BalSelectOption from its children due to state-based filtering.

Error stack

NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

TypeError: Cannot read properties of null (reading 'nodeType')

Expected Behavior

It should not throw an error

Steps to Reproduce

1. Select "Surfing" in Sport 1
2. Select "Running" in Sport 2
3. Select "Running" in Sport 1
4. Error occurs - Sport 2 tries to remove "Running" (the currently selected option)

Code

const SPORT_OPTIONS = [
  {
    key: "running",
    value: "Running",
  },
  {
    key: "climbing",
    value: "Climbing",
  },
  {
    key: "surfing",
    value: "Surfing",
  },
];

export default function App() {
  const [selectedSport, setSelectedSport] = useState<string>();

  useBaloiseDesignSystem();

  return (
    <main className="container p-large">
      <BalField>
        <BalFieldLabel>Sport</BalFieldLabel>
        <BalFieldControl>
          <BalSelect
            onBalChange={(event) => {
              setSelectedSport(event.detail as any);
            }}
            name="sport"
          >
            {SPORT_OPTIONS.map((option) => (
              <BalSelectOption
                key={option.key}
                value={option.key}
                label={option.value}
              >
                {option.value}
              </BalSelectOption>
            ))}
          </BalSelect>
        </BalFieldControl>
      </BalField>
      <BalField>
        <BalFieldLabel>Sport 2</BalFieldLabel>
        <BalFieldControl>
          <BalSelect name="sport2">
            {SPORT_OPTIONS.filter((option) => option.key !== selectedSport).map(
              (option) => (
                <BalSelectOption
                  key={option.key}
                  value={option.key}
                  label={option.value}
                >
                  {option.value}
                </BalSelectOption>
              )
            )}
          </BalSelect>
        </BalFieldControl>
      </BalField>
    </main>
  );
}

Version

19.8.4

Browsers

Microsoft Edge

Device

Desktop

Code Reproduction URL

https://codesandbox.io/p/sandbox/baloise-design-system-headers-zz42hl

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct