Chip add on blur

[deviantfero]

Is there a way in which I can handle the blur event for the Chips component to create a last chip when the user blurs the element?, for example

[food x] [drinks x] soda -> blur event -> [food x] [drinks x] [soda x]

It's a bit counter-intuitive that the last item is lost if I don't press enter or tab before submitting as part of a form, am I missing something here?

[miller-josh]

@deviantfero Did you ever find a solution for this? I'm dealing with the same issue...

[theodorebear]

upvote, this is weird that it works like this too.

[deviantfero]

@miller-josh I don't recall finding a solution to this, but I'm guessing you could use the onBlur event to send a keypress to the component? not sure, just an idea.

[mcantonbul]

You can use it this way.

const chipsRef = useRef();
<div onBlur={()=>{ chipsRef.current.addChip(chipsRef.current.state.value)}}>
    <Chips
        ...
        ...
        ref={chipsRef}
    />
</div>