Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[zeeshanjan82]

I have experienced an issue with 'react-select' library when displaying translated options inside the dropdown. I am getting the attached screenshot error

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The error occurs randomly on several pages and it is hard to reproduce this error but it seems to be coming from the react-select library when it is configured to use the translation options. Example:

  const dateRangeList = [
    { label: getText('retailtransactions:DATERANGE_TODAY'), value: TODAY },
    { label: getText('retailtransactions:DATERANGE_YESTERDAY'), value: YESTERDAY },
    { label: getText('retailtransactions:DATERANGE_THIS_WEEK'), value: THIS_WEEK },
    { label: getText('retailtransactions:DATERANGE_LAST_WEEK'), value: LAST_WEEK },
    { label: getText('retailtransactions:DATERANGE_THIS_MONTH'), value: THIS_MONTH },
    { label: getText('retailtransactions:DATERANGE_LAST_MONTH'), value: LAST_MONTH },
  ];

I am configuring the above code to populate the react-select options and then I am calling the following code in jsx file

<Select name="dateRange" className="date-range rdt mt-30" placeholder={getText('retailtransactions:DATERANGE')} value={state.dateRange ? dateRangeList.filter((date) => date.value === state.dateRange)[0] : ''} onChange={(val) => onDateRangeChange(val)} options={dateRangeList} />

Here I am using an helper function getText which pull the value from the react-i18next translation file

import { ENGLISH_LANG } from 'configs/constants';
import i18n from '../../i18n';

export const getText = (label) => {
    if (i18n.t &&  (!i18n.t(label) || i18n.t(label)?.length === 0)) {
        return i18n.t(label, { lng: ENGLISH_LANG });
    } else if(i18n.t) {
        return i18n.t(label);
    } else {
        return label;
    }
};

[Snaxai]

I have this same issue when interacting with react-select component in Microsoft Edge after translating the website

[dukemai]

I have the same issue after translating on Edge also

[haukurmar]

I also have the same issue, seems to only happen on Edge (v124)

NotFoundError Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[kaoz70]

Same issue, it happens when using Edge (Chromium) and translating the page. It does not happen immediately after translating, you have to open the menu and then close it, then it crashes. I have not been able to pinpoint what node is causing this to break.

[iohunter]

We have the same issue using translation in Edge 124, crashes on span's with ids aria-focused, aria-results, aria-guidance. As a workaround – add prop ariaLiveMessages with empty messages.

const emptyAriaLiveMessages = {
    guidance: () => '',
    onChange: () => '',
    onFilter: () => '',
    onFocus: () => ''
};

...

<Select
    ariaLiveMessages={emptyAriaLiveMessages}
    ...
/>

[frenchki]

Also facing this issue with Edge browser version 125. Tested @iohunter workaround and can confirm that works to stop the issue.

[CharlesErrington]

Thank you so much @iohunter that worked! How did you figure out that that fixed it?