Cannot apply custom Icon

[Youn-ha]

(screen capture above is normal case)

(screen capture above is error case)

I tried to apply custom Clear icon by using ClearSelectedIcon. But it doesn't work in my environment. Anytime I use ClearSelectedIcon, clear <button> gets empty. (like screen capture above) It would be so thankful if somebody could help me out. Here's my code below.

  const clearBtnRenderer = () => (
    <>
      // I tried several tags(img tag, text), but nothing worked
      <svg
        width="24"
        height="24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        className="dropdown-search-clear-icon gray"
      >
        <line x1="16" y1="8" x2="8" y2="16"></line>
        <line x1="8" y1="8" x2="16" y2="16"></line>
      </svg>
    <>
  );

  return (
    <div className="a_search_multiselect_box">
      <MultiSelect
        options={optionList}
        value={selected}
        onChange={handleChange}
        ClearSelectedIcon={clearBtnRenderer}
      />
    </div>
  );
};

I refered to storybook below. react-multi-select Storybook : custom arrow

[harshzalavadiya]

Hi @Youn-ha,

instead of passing as function please pass it as rendered component like below and it should work as expected

<MultiSelect
  options={options}
  value={selected}
  onChange={setSelected}
  labelledBy={"Select"}
- ClearSelectedIcon={clearBtnRenderer}
+ ClearSelectedIcon={<ClearBtnRenderer/>}
/>

[Youn-ha]

Hi @harshzalavadiya ,

I tried below -

1.

  const clearBtnRenderer = () => (
    <>
      <svg
        width="24"
        height="24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        className="dropdown-search-clear-icon gray"
      >
        <line x1="16" y1="8" x2="8" y2="16"></line>
        <line x1="8" y1="8" x2="16" y2="16"></line>
      </svg>
    <>
  );

  return (
    <div className="a_search_multiselect_box">
      <MultiSelect
        options={optionList}
        value={selected}
        onChange={handleChange}
        ClearSelectedIcon={<clearBtnRenderer />}
      />
    </div>
  );
};

===> type error : Type 'Element' is not assignable to type 'string | Function'.

2.

  return (
    <div className="a_search_multiselect_box">
      <MultiSelect
        options={optionList}
        value={selected}
        onChange={handleChange}
        ClearSelectedIcon={() => <clearBtnRenderer />}
      />
    </div>
  );
};

===> there was no type error, but clear button didn't show up.

3.

  return (
    <div className="a_search_multiselect_box">
      <MultiSelect
        options={optionList}
        value={selected}
        onChange={handleChange}
        ClearSelectedIcon={() => (
          <svg
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            className="dropdown-search-clear-icon gray"
          >
            <line x1="16" y1="8" x2="8" y2="16"></line>
            <line x1="8" y1="8" x2="16" y2="16"></line>
          </svg>
        )}
      />
    </div>
  );

===> this one either.

(And sorry btw how can I show subtracted/added code like you in code markdown? I tried to google it but failed to find it)

[harshzalavadiya]

@Youn-ha

• First approach is correct type error might be due to incorrect TypeScript interface that was defined by me, I have created a PR that should resolve this issue
• you can use backticks with diff extension diff files will be automatically highlighted when there's + or - as first charactor

[harshzalavadiya]

released v3.1.7 should fix this typecheck issue

[Youn-ha]

I updated to v3.1.7 and it works well! Thank you so much

[prathambhardwaj]

Hi, I want to create a customized clear icon for selected option, there should be a clear icon for every selected item, is that possible in react-multi-select-component?

[harshzalavadiya]

@prathambhardwaj you can do that but I would recommend using react-select

[prathambhardwaj]

Could you please tell me the custom element which can provide the clear icon to every selected item?

[harshzalavadiya]

@prathambhardwaj it's valueRenderer