Add support for right-click and pasting code

Question

Add support for right-click and pasting code

rahul-sharma-uipath opened this issue 2 years ago · comments

rahul-sharma-uipath commented 2 years ago

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.

Andreas Willi · Answer 1 · Sun Aug 21 2022 17:24:11 GMT+0800 (China Standard Time)

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 · Answer 2 · Tue Aug 23 2022 01:05:11 GMT+0800 (China Standard Time)

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

Andreas Willi · Answer 3 · Tue Aug 23 2022 22:33:57 GMT+0800 (China Standard Time)

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

Andreas Willi · Answer 4 · Sun Aug 28 2022 05:09:23 GMT+0800 (China Standard Time)

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.

rahul-sharma-uipath · Answer 5 · Sat Sep 10 2022 03:10:34 GMT+0800 (China Standard Time)

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

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

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

then the following happens -

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 -

with override -

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

Andreas Willi · Answer 6 · Sat Sep 10 2022 18:49:28 GMT+0800 (China Standard Time)

@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 · Answer 7 · Sun Sep 11 2022 06:14:59 GMT+0800 (China Standard Time)

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

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

Andreas Willi · Answer 8 · Sun Sep 11 2022 15:02:08 GMT+0800 (China Standard Time)

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.

Andreas Willi · Answer 9 · Mon Sep 12 2022 06:03:20 GMT+0800 (China Standard Time)

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