andreaswilli/react-verification-input

Add support for right-click and pasting code

rahul-sharma-uipath opened this issue · 9 comments

rahul-sharma-uipath commented

Currently, if you right-click the component, it renders the context menu for a div which doesn't allow pasting the code.

The workaround is Ctrl + V for pasting the code but right-click and paste would be preferred.

image

andreaswilli commented

Right, that's a limitation of the current implementation. As you mentioned, the visible parts are not input elements, thus there is no paste option. I can try to find a way to support right-click pasting anyway.
If you have an idea, let me know.

rahul-sharma-uipath commented

@andreaswillis what if you placed the input element "above" the first div instead of hiding it from the screen?

andreaswilli commented

That could be a solution. Gonna give it a try.

  • 👍1
andreaswilli commented

I just released v3.1.0 with right-click support.

The invisible input is now placed over the visible elements which also fixes some other issues on iOS.

  • 👍1
  • 🎉1
rahul-sharma-uipath commented

@andreaswilli one thing I noticed from this - the default input component has this box around it as shown below
image

however, when I try to pass className via the inputProps e.g.

        <VerificationInput
            inputProps={{
                disabled: loading,
                className: classes.input,
                ...inputProps,
            }}
        />

then the following happens -
image

the reason appears to be that the .vi class as shown below, gets overwritten by the prop being passed in. I think it would make sense to combine the classes in some way to ensure that the vi class is always there and then additional classes are added on top of that.

without override -
image

with override -
image

to workaround this i'm manually invoking the vi class but I think it would be better to fix this from the library itself

andreaswilli commented

@rahul-sharma-uipath
Combining the default and custom class names sounds reasonable.

But I'm curious where this box comes from. Haven't seen this on any device I tested.
What OS/browser are you using? Also, are you using any special settings like high contrast mode?

rahul-sharma-uipath commented

it repros fairly consistently for me with no customizations - see https://codesandbox.io/s/nervous-sound-30qstc?file=/src/App.js

image

I'm using an M1 Macbook Pro macOS 12.4 on Chrome Version 105.0.5195.102 (arm64) with no special settings

andreaswilli commented

Thanks for the codesandbox. I'm getting the same result now.

On the demo website the border is removed by tailwind, that's why I didn't see it.

andreaswilli commented

@rahul-sharma-uipath Released 3.1.1 with some fixes. Let me know if the issues are resolved.

  • 🎉1