Can not clear/ override the input value in v 1.0.3

[olgaplaga]

There is currently no way to clear the input value before the email is transformed into the tile.

The value is set while someone writes inside an input before the email address is finished and converted to the tile.
At this moment, when I want to create for e.g an action button, that clears input from unfinished emails like this:

const input: HTMLInputElement | null = document.querySelector('.react-multi-email input')

input.value = '' // this will not work

This will not work, because the package overrides this process with the value. Please provide an option to clear the input from value.

[ojaspatharkar-qure]

same here. need provision to clear the input.

[LoveWithCoding]

@ojaspatharkar-qure , @olgaplaga Ddi you find the solution?

[ojaspatharkar-qure]

@ojaspatharkar-qure , @olgaplaga Ddi you find the solution?

have you tried using onChangeInput props?

[Yandamuri]

@ojaspatharkar-qure , @olgaplaga Ddi you find the solution?

have you tried using onChangeInput props?

onChangeInput gives what ever we type(letter by letter). Can we remove input by using this prop?

[hovelopin]

@LoveWithCoding hello,

Can you confirm if I understand this correctly?

Is this the issue where it doesn't work when I create a button externally and try to control the input value?

[Yandamuri]

@hovelopin

let say if i type correct email and press tab then it will be shown as chip(with some background color). but some times user might leave the filed with half typed value which is any way not a valid email. In such a cases i want to remove the half typed value on OnBlur event. I do not want fields contain unfinished emails.

Is there a way to achieve this?

[thomasJang]

@hovelopin

I just made a PR. PLZ review my code.
I thought a new PROP was needed to control INPUT values in the component. It can be used as in the following example.

const [input, setInput] = useState<string>('');

return (
        <ReactMultiEmail
          inputValue={input}
          onChangeInput={value => {
            console.log(value);
            setInput(value);
          }}
          onBlur={() => {
            setInput('');
          }}
        />
);

[Yandamuri]

@hovelopin

I just made a PR. PLZ review my code. I thought a new PROP was needed to control INPUT values in the component. It can be used as in the following example.

const [input, setInput] = useState<string>('');

return (
        <ReactMultiEmail
          inputValue={input}
          onChangeInput={value => {
            console.log(value);
            setInput(value);
          }}
          onBlur={() => {
            setInput('');
          }}
        />
);

Exactly. this what I am looking for.

[thomasJang]

Now, you can use 1.0.24

It can be used as in the following example.

const [input, setInput] = useState<string>('');

return (
        <ReactMultiEmail
          inputValue={input}
          onChangeInput={value => {
            console.log(value);
            setInput(value);
          }}
          onBlur={() => {
            setInput('');
          }}
        />
);

[Yandamuri]

@thomasJang Thank you for this quick response. This solved the problem discussed here, but got new issue.

Screen.Recording.2024-07-17.at.5.04.01.PM.mov

when email is validated(When tapped on tab bar), email field renders redundant emails because of new prop inputValue. Is it possible to prevent rendering the inputValue once email is validated.

[thomasJang]

@Yandamuri
Could you share your code?

[Yandamuri]

@thomasJang

const MultiEmail = () => {
    const [tempInput, setTempInput] = useState('');
    const [emails, setEmails] = useState([]);

    return (
        <ReactMultiEmail
            placeholder="Type here"
            emails={emails}
            inputValue={tempInput}
            onChange={(emails) => setEmails(emails)}
            onChangeInput={(value) => setTempInput(value)}
            onBlur={() => setTempInput('')}
            getLabel={(email, index, removeEmail) => {
                return (
                    <div data-tag key={index}>
                        {email}
                        <span data-tag-handle onClick={() => removeEmail(index)}>×</span>
                    </div>
                );
            }}
        />
    );
}

[thomasJang]

@Yandamuri
https://codesandbox.io/p/sandbox/react-multi-email-test-f79zn2

I don't think there's a problem when I check it on the link. Check it out.

[Yandamuri]

@thomasJang
Still issue persists in the link you provided. I am not sure if understood the problem from my previous comment. Problem is redundant emails and it still exists.

[

Screen.Recording.2024-07-18.at.8.55.01.AM.mov

](url)

OR Please correct me if i am missing something.