React-select: Not possible to paste in Createable Selects on mobile

[mbirkegaard]

With any of the examples from https://react-select.com/creatable the standard ways (tapping or long pressing inside the input) of making the paste menu appear on either iOS or Android don't work.

I with an iOS 13.3.1 iPhone 7 and with an emulated Android 10.0 Pixel 2.

Once in a while it's possible by long pressing on the placeholder text, but that's not a good nor particularly reproducible solution for users.

The other behaviours (selecting an option, etc.) work as intended.

[bbatta38]

same issue

[eldh]

fwiw we worked around this with some css tricks. I'd be happy to contribute a PR if the maintainers want one.

[bbatta38]

@eldh Could you tell me the way how you have done if you don't mind?

[eldh]

It's a bit scattered, but I think these are the important bits:

defaultStyles = {
input: (provided, _state) => ({
    ...provided,
    width: '100%',
  }),
  placeholder: (provided, _state) => ({
    ...provided,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    width: '100%',
    pointerEvents: 'none',
  }),
}

let style = c => styled(c)`
  width: 100%;
  input {
    width: 100% !important;
  }
  .autocomplete__value-container > div:last-child {
    flex: 1;
  }
  .autocomplete__input {
    width: 100%;
  }
`

const withPrefix = Comp => props => <Comp {...props} classNamePrefix="autocomplete" />

It relies on pointerEvents:none, which doesn't work in some old browsers, but that's ok for us. Not sure all of these "width: 100%" declarations are needed, but it works ok for us now afaict.

[bbatta38]

@eldh Thank you mate. It helps a lot. Incidentally, as you said, "pointerEvents" has to be "none" and I don't think all of those "width:100%" are needed. Only thing you need to care about is input tag inside input class should have "min-width" is some fixed pixel(e.g. 20px in my case). this is perfectly working for me. Thank you again.

[bladey]

Hello -

Thanks for your help @eldh, we'd appreciate a PR if you have the time!

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.