chakra-react-select icon indicating copy to clipboard operation
chakra-react-select copied to clipboard
verified publisher icon csandman

[BUG] Long press blurs the input

Open lcswillems opened this issue 8 months ago • 2 comments

Description

On mobile, I want to paste something into the input, I need to do a long press. However, when I do a long press, it blurs the input, making it impossible to paste on mobile.

chakra-react-select Version

6.0.1

Link to Reproduction

https://stackblitz.com/edit/crs-v6-demo-mb7svruj

TypeScript?

  • [ ] Yes I use TypeScript

Steps to reproduce

  1. Open:

https://crsv6demomb7svruj-hjl5--5152--33edf5bb.local-credentialless.webcontainer.io/

  1. Open Chrome Dev Tools mobile with:

Image

  1. Open the first select (chakra-react-select). And then do a long press in the input. It will blur the input.

  2. Open the second select (react-select). And then do a long press in the input. The input doesn't blur.

Operating System

  • [ ] macOS
  • [ ] Windows
  • [ ] Linux
  • [ ] iOS/iPadOS
  • [ ] Android

Package Manager

NPM

Additional Information

No response

lcswillems avatar Mar 31 '25 13:03 lcswillems

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

bolt-new-by-stackblitz[bot] avatar Mar 31 '25 13:03 bolt-new-by-stackblitz[bot]

Sorry for the delay, I finally got a chance to look at this. This features is something I had never really thought about. So first, I checked v5 to see if this behavior was ever supported by chakra-react-select, and it doesn't appear like it was. I do see what you mean with the original react-select package though. At least in an emulated mobile device, it doesn't blur.

I have to ask though, have you tested the original react-select behavior on a real mobile device? I just tried on my iPhone to see if that feature actually works, and it's impossible to get the text options menu to pop up from pressing on the select in either version. Unless you manage to target the exact spot where the cursor is, because that's how big the actual input is. So let me know if you try it and it does work, because it doesn't appear to for me. Or if you have an Android, I'm also curious about that.

If it doesn't actually allow you to access to the text options menu on mobile in the original package, then I most likely won't be able to implement it in this wrapper.

csandman avatar Apr 02 '25 22:04 csandman