hc-oss/react-tag-input-component

lightweight react component for tag(s) input

react-tag-input-component's Issues

Spread props to input component

Hi team, I really like the lib, and I would like to suggest you to spread the props coming from the TagsInput component to the input tag inside. Something like this:

Another workaround would be to create an additional prop in TagsInput component named inputProps or similar, in order to add props into input component. This solution would grant to add props like onFocus, autoComplete or another prop that we use with testing purposes.

Thank you all.

Bug: types for value is optional but actually required

react-tag-input-component/src/index.tsx

Line 47 in 861e4e7

const [tags, setTags] = useState<any>(value || []);

Here the code seems considered undefined value but below code makes the tags undefined and make throw error.

react-tag-input-component/src/index.tsx

Lines 53 to 57 in 861e4e7

	useDidUpdateEffect(() => {
	if (JSON.stringify(value) !== JSON.stringify(tags)) {
	setTags(value);
	}
	}, [value]);

IMO current code is not support uncontrolled component, so it would be good to have value and onChange props required

Someday for uncontrolled component may be form of

<form onSubmit={(e) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  const tags = formData.get("tags"); // should be such like ["banana", "apple"]
}}>
  <TagsInput name="tags" />
</form>

Add Disabled Prop

We need a disabled prop to makes disabled the Component in any type of form

Can I trigger the list below to setState tag input?

I tried to setState at list but it didn't work.

setInitMasterTag((preventState) => {
return [...preventState, label]
})

Disable backspace deletion of tags

Hi,

Is it possible to change or remove te key you use to delete tags from the input field.
Now If you use backspace in an empty input field it removes te last tag. Is it possible to turn this on or of?

I want to use it for my project but the backspace doesn't use OnRemove. It's projecting some problems for my project.

Add className to props

When working with styled-components, in order to override styles of a third party component, the third party component needs to accept className. See here. Without this, it makes it very hard to use this library, which is a shame because it's lightweight and exactly what I need.

How we can handle asynchronous initial state ?

I tried initial state as async. And I found that tags are not updating like state

export default function App() {
  const [selected, setSelected] = useState();

  useEffect(() => {
    setTimeout(() => {
      setSelected(["papaya1", "papaya1", "papaya2"]);
    }, 2000);
  }, []);

  return (
    <div>
      <h1>Add Fruits</h1>

      <pre>{JSON.stringify(selected)}</pre>

      <TagsInput
        value={selected}
        onChange={setSelected}
        name="fruits"
        placeHolder="enter fruits"
      />
      <em>press enter to add new tag</em>
    </div>
  );
}

I can't get data to state, i can only type it to component ( which change the state )

Hello, my codesandbox is available => https://codesandbox.io/s/frosty-http-vk7xy8?file=/src/App.js. The problem is I can't get data. How can I change it without typing ?
const getData = async () => {
const { data } = await getParams();
setSelected(data[0].phrase); --array
};

Change `focus` to `input` tag

I need change a focus to input tag when div with rti--container class clicked. I think that's more better .

Feature request: Set max number of tags?

I'm wanting to set a max number of tags. Anyone know how to do this?

[Enhancement] Input is Required

Would it be possible to add a required prop?

I want to be able to require that a user fill in the input with something.

Separators not working when we press comma

Is 'Comma' a valid separator (Seprator in this case) for the seprators string array prop? cause it seems it doensn't trigger the tag addition when I press comma

Feature request: multiple values per tag

First of all: thanks to @harshzalavadiya for creating and maintaining this component!

For my current usecase, I need the ability to add multiple values to one tag. Essentially turning a tag into an array of multiple values. The tag will automatically close after an n number of values on one tag.

I have added this functionality to the source code and will send a pull request. Thanks in advance for considering!

How can we style the default width of input element ?

How can we style the default width of input element ?
I mean i can not do it with styled components or even with style attributes.
Its a moajor blocker because we simply can not customise css of it by ourself.

Feature Request: maxLength

Add the maxLength attribute.

Minor css change for a better user experience

width: auto and flex-grow: 1 should be added to the rti--input class for the input to take the remaining space instead of the current width:50%.
This will enable the user to click anywhere and be able to start typing

need props className

I hope react-tag-component have className props, with it we can customize tag input style like border-radius, border, ring on focus, and coloring them.

connect to data source to re-use tags?

Is there a way to connect this to a data source (db, json, api, etc) so you can either lookup and re-use existing tags or enter a new one?

setTags onBlur event

Hey, would really like to be able to set a prop like submitOnBlur so currect input text would be saved as tag on blur.

Possible to implement?

It is triggering the onChange on the first render

An excellent and easy-to-use component, but unfortunately it is triggering automatically the onChange event when it renders for the first time, Is it expected behavior?

How add tags - beforeAddValidate

I want to validate the input type, allowing only numbers. Can I do this with the "beforeAddValidate" function?

If yes, how do I add the tags after using this function?

How to add class to rti--container class?

I want to make the input has a red border when there's an error. Hence, I need to add a class to the rti--container class dynamically, seems like there's not an option for it yet?

[Feature request] Handling paste and then split it

Hi,

It would be a great addition to have a Ctrl+V (paste) event handler for the TagsInput component. Specifically, when a user pastes a comma-separated list of IP addresses, like 82.32.121.39,5.12.49.203, it would be awesome if the component could automatically split the string by the commas and add each IP address as an individual tag.

Cheers

typo on css

The css property should be background, not bg

https://github.com/harshzalavadiya/react-tag-input-component/blob/205d4a17159ad7acc797926b186d247e8b79bc54/src/index.tsx#L36

Bug: npm install error. conflict on resolving peer deps for react@18

Env

node - v16.15.1
npm - v8.11.0

Command

npm install

Error Result

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   dev react@"^18.2.0" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addons
npm ERR!     peer @storybook/addons@"^6.4.0" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-knobs
npm ERR!       dev @storybook/addon-knobs@"^6.4.0" from the root project
npm ERR!   4 more (react-dom, @storybook/api, @storybook/components, @storybook/theming)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-knobs
npm ERR!   dev @storybook/addon-knobs@"^6.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/namhoon/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/namhoon/.npm/_logs/2022-12-28T03_33_55_643Z-debug-0.log

remove focus ring

How do I remove the focus ring? I tried to add styles to rti--container:focus { outline: none } and rti--input:focus { outline: none }, but it's not working

Value not being set when form opened

I'm setting the input to a default value inside useEffect, but the value is not being set inside TagsInput.

const [allergyTags,setAllergyTags] = useState([]);

useEffect(() => {
setAllergyTags(["test1", "test2"]);

}
   <TagsInput
                        onChange={setAllergyTags}
                        value={allergyTags}
                        name="allergy"
                        placeHolder="enter allergies"
                      />

I'm expecting the value to be test1, test2. if I add allergyTags to the placeholder, it shows the correct information. Any help would be greatly appreciated.

codesandbox

Feature request: Forward ref to the input element

Motivation

I'm developing a feature where I wish to get the current value of the internal input.rti--input element.

Suppose the user starts typing the first tag in an empty tag input component. If the user forgets to press "Enter" to add the tag, the value state remains an empty array.

This can be problematic if the user submits the form now since we're submitting [] instead of ["papaya"] in the form data. I want to be more lenient by auto-inserting any value in the <input> element into the value state whenever the user submits.

Suggested API Change

I suggest that we can expose a new prop called ref, which will be forwarded to the <input> element of classname rti--input. So it would look something like:

const [selected, setSelected] = useState(["papaya"]);
const ref = useRef<HTMLInputElement>(null);  // 👈

<TagsInput
  ref={ref}  // 👈
  value={selected}
  onChange={setSelected}
  name="fruits"
  placeHolder="enter fruits"
/>

Keep the tag word when use Backspace key

Adding the comma and space key to the add trigger to separate the tags and when use the Backspace the word keep for corrections or something like that

Space separators is not working

I have added separators like below and it's not working.
separators={['Space', 'Enter']}

after space tag is not getting add.

seprator ["Space"] dose not work

the "Enter" works but the "Space" dosent work for seprators props
https://codesandbox.io/s/react-tag-input-component-styled-plu3b

Add Props to stop adding tags if exist before

It would be great if have something like "allowDuplicates" props to stop adding duplicate tags

seprators prop not working

No way to create tags on mobile

The component doesn't allow any way to create tags using a mobile browser. I tried adding different separators as well, still doesn't work.
Tested on Chrome.