Label causing first item to be deleted.

[dasveloper]

When adding a label to the ReactTags input, it is causing the first tag to be deleted on focus.

Expected behaviour

Clicking the label should focus the input.

Current behaviour

Clicking the label focuses the first tag, triggering the onDelete function and removing it.

Steps to Reproduce

Steps to reproduce the problem:

1. Create a fresh react app (npx create-react-app demo)
2. Install react-tag-autocomplete
3. Add label around your ReactTags component (like in code snippet below)
4. Add a few tags to your input
5. Click the label, you'll see a tag dissappear

<label>
  My label 
  <ReactTags
    allowNew
    tags={tags}
    onDelete={onDelete}
    onAddition={onAddition}
  />
</label>

Example and screenshots

https://github.com/dasveloper/demo-react-tags

Screenshots

If applicable, add screenshots to help explain your problem.

Your environment

• OS: macOS Monterey
• Browser: chrome v101
• Version of the component: 6.3.0
• React version: 18.1.0

Additional context

I believe just allowing an ID to be added to the input itself, so we can add an htmlFor attribute to the label would make it focus the input instead of the first tag.

[i-like-robots]

Thanks for taking the time to submit this issue.

Your suggestion of adding an ID is actually possible, you can append an ID using the inputAttributes prop.

In terms of how your example code should behave... well, I don't know, wrapping the whole component in a label is not something I'd recommend. According to the HTML spec labels are "associated with a specific form control" so whilst it's not invalid to have multiple interactive elements inside a label, it's not how they're meant to be used and this will cause accessibility issues - MDN covers the accessibility of buttons inside labels.

If it's relevant too, the next major version of this component includes a label element.