TagsInput will override existing search text when value is pasted in

[tjb1019]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.8.0

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

There are really two issues here:

1. Pasting a value into the input will automatically override the existing searchValue. Example: I manually type "key", and then paste in "value". "key" is removed and only "value" is what gets saved to state.
2. In a controlled instance of TagsInput, value should only get updated if I manually update it via onChange. However, in its current state, value will be updated internally when a user pastes a value into the input.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

Looking at the source code, the issue is within the handlePaste method. It is explicitly setting value state, and clearing searchValue state. There is no way to override this behavior.

  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
    onPaste?.(event);
    event.preventDefault();

    if (event.clipboardData) {
      const pastedText = event.clipboardData.getData('text/plain');
      setValue(
        getSplittedTags({
          splitChars,
          allowDuplicates,
          maxTags,
          value: pastedText,
          currentTags: _value,
        })
      );
      setSearchValue('');
    }
  };

This is all very explicit so I guess this is the intended behavior, but I would expect pasting a value in to simply concat the existing searchValue with the pasted value. Hitting the enter key should be what commits the searchValue to state. Something like this is a possible fix:

setSearchValue(existingSearchValue => existingSearchValue + pastedText)

Self-service

• [ ] I would be willing to implement a fix for this issue