Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TagsInput will override existing search text when value is pasted in #6073

Closed
1 of 2 tasks
tjb1019 opened this issue Apr 12, 2024 · 1 comment
Closed
1 of 2 tasks
Labels
Fixed patch Completed issues that will be published with next patch (1.0.X)

Comments

@tjb1019
Copy link

tjb1019 commented Apr 12, 2024

Dependencies check up

  • 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
rtivital added a commit that referenced this issue May 10, 2024
@rtivital rtivital added the Fixed patch Completed issues that will be published with next patch (1.0.X) label May 10, 2024
@rtivital
Copy link
Member

Fixed in 7.9.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fixed patch Completed issues that will be published with next patch (1.0.X)
Projects
None yet
Development

No branches or pull requests

2 participants