Using onPaste with react-select

user_2544506 0
Viewed 1292

I'm trying to get onPaste working with react-select. It seems like, that it is not possible to make use of the event.

Basically I'm just doing this within the <Select/>: onPaste={(e) => this.doPasteMagic(e)}

But it is never fired. Am I missing something or is there another way to distinguish between typing and pasting?

I've seen a few suggestions about using onChange, but this seems dirty to me as well.

react-select reactjs
2 Answers

I was fiddling a lot with that. I find it rather surprising that this is not one of the main features of react-select. Anyway, I've found a workaround for this:

<div style={{height: '100%', width: '100%' }} onPaste={(e) => console.log(e)}>
    <Select .../>
</div>

This seems to do the trick and triggers the right event at the right time.

user_25445060

You can create a custom input field and attach an onPaste event handler to it.

import { components } from 'react-select'
const CustomInput = props => (
  <components.Input
    {...props}
    onPaste={myOnPasteHandler} />
)

Then pass this to Select via the 'components' prop:

import Select from 'react-select'
import CustomInput from './CustomInput'
const MySelectComponent = props => (
  <Select 
    // ...
    components={{ Input: CustomInput }} />
)
user_71437540
Related