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

[maurobilotti]

Hi,

I have found an issue today working with the React Icon Picker component.

I had to overwrite the "absolute" position on one of the classes of the component but I'm not sure that's the reason.

The definition of my component looks this way: (ignoring the whole list of font-awesome icons)

const fontAwesomeIcons = { 
  //whole object of font-awesome icons that can be found on the demo
  //https://github.com/fontIconPicker/react-fonticonpicker/blob/master/src/docs/helpers/iconDefs.js
}

type IconPickerProps = {
  value?: string;
  onChange?: (value?: string) => void;
};

const styles = {
  "@global": {
    ".rfipdropdown": {
      position: "relative", 
    },
  },
};

const IconPicker = ({ value, onChange }: IconPickerProps) => {
  const [icon, setIcon] = useState<string | undefined>(value);

  const iconChange = (value?: string | undefined) => {
    setIcon(value);
    if (onChange !== undefined) onChange(value)!;
  };

  const pickerProps = {
    icons: [
      ...fontAwesomeIcons.Accessibility,
      ...fontAwesomeIcons.Arrows,
      ...fontAwesomeIcons["Audio & Video"],
      ...fontAwesomeIcons.Business,
      ...fontAwesomeIcons.Chess,
      ...fontAwesomeIcons.Code,
      ...fontAwesomeIcons.Communication,
      ...fontAwesomeIcons.Computers,
      ...fontAwesomeIcons.Currency,
      ...fontAwesomeIcons["Date & Time"],
      ...fontAwesomeIcons.Design,
      ...fontAwesomeIcons.Editors,
      ...fontAwesomeIcons.Files,
      ...fontAwesomeIcons.Genders,
      ...fontAwesomeIcons.Hands,
      ...fontAwesomeIcons.Health,
      ...fontAwesomeIcons.Images,
      ...fontAwesomeIcons.Interfaces,
      ...fontAwesomeIcons.Maps,
      ...fontAwesomeIcons.Objects,
      ...fontAwesomeIcons["Payments & Shopping"],
      ...fontAwesomeIcons.Shapes,
      ...fontAwesomeIcons.Spinners,
      ...fontAwesomeIcons.Sports,
      ...fontAwesomeIcons.Status,
      ...fontAwesomeIcons["Users & People"],
      ...fontAwesomeIcons.Vehicles,
      ...fontAwesomeIcons.Writing,
    ],
    theme: "bluegrey",
    renderUsing: "class",
    value: icon,
    onChange: iconChange,
    isMulti: false,
    noSelectedPlaceholder: "Pick icon"
  };

  return (
    <>
      <FontIconPicker {...pickerProps} />
    </>
  );
};

export default withStyles(styles)(IconPicker);

The error apears when scrolling up/down faster.
Can you please take a look and suggest what could be the issue?