[Antd] Select can not work with mode='tags'

[nvlong198]

Select can not work with mode='tags', become mode='multiple' when using with react-js-cron

playground: https://stackblitz.com/edit/react-mdwfya?file=index.js

[nvlong198]

@xrutayisire I found the problem is in components/CustomSelect

what actually element.setAttribute('readonly', 'readonly') do ?

useEffect(() => {
    Array.from(
      document.getElementsByClassName('ant-select-selection-search-input')
    ).forEach((element: Element) => {
      element.setAttribute('readonly', 'readonly')
    })
  }, [])

[xrutayisire]

Hey,

Thanks for the report!

I see the problem, I will provide a fix 👍

useEffect(() => {
    Array.from(
      document.getElementsByClassName('ant-select-selection-search-input')
    ).forEach((element: Element) => {
      element.setAttribute('readonly', 'readonly')
    })
  }, [])

This code is used to disabled hidden search input of antd that cause problems because we don't want any search field on it.

[nvlong198]

Any problems if change mode to 'multiple' and remove that useEffect ?

<Select
      mode='multiple'
      allowClear={!readOnly}
.... />

[xrutayisire]

As you can see on the following screenshot, it's not wanted to let the user type anything in the search input:

And Design provide a "showSearch" property but it's not working with the "tags" mode 😕

[xrutayisire]

I heavily use the prop "tagRender" from antd so that's why I used "tags" mode.

I just checked antd documentation and then RcSelect documentation about "tagRender" and they added unit tests and examples only with "tags" mode.

BUT the doc don't talk about the "mode" (yet)

tagRender | Customize tag render | (props) => ReactNode

BUT again, it's currently working with "multiple" as you point out...
In their code they don't test the mode https://github.com/react-component/select/blob/05d19a953315f4ecd5510dbc6d4bd5230ccff6e5/src/Selector/MultipleSelector.tsx#L145 .

Let me check If I find out mode about the use of "tagRender" with "multiple" 🙂

If you have any indication I'm open for it!

[xrutayisire]

Ok, it seems to be ok to use it with "multiple". 🥳
For me, they should have named it differently because of the explicit mode "tags".

Anyway to give you info about it:

• Original issue asking for a renderTag function: Select Multiple Mode (tags) Override Tag Style ant-design/ant-design#12910
• PR on RcSelect: Adding a custom renderer for tags react-component/select#445
• PR on antd Select: feat: Adding custom renderer for select with demos ant-design/ant-design#21064

And as you can see here (ant-design/ant-design#21064 (comment)) they even discussed it with "multiple" mode and updated the demo: https://github.com/ant-design/ant-design/blob/master/components/select/demo/custom-tag-render.md#en-us

So good for me, let me change that, check if everything work fine and I will release a new hotfix of "react-js-cron".

[xrutayisire]

It's live 🥳

New version 1.1.1: https://www.npmjs.com/package/react-js-cron

Try it and let me know but you should not have any problem now 🙂

I forked your example to show you the fix: https://stackblitz.com/edit/react-mdwfya-t1i1wg?file=package.json