Skip to content

Fix paste menu not opening on mobile #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix paste menu not opening on mobile #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa1c336
Fix paste menu on mobile
cwagner22 Sep 25, 2024
2491f3c
Regenerate docs
cwagner22 Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions docs-src/pages/styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,6 @@ import { Callout } from "nextra-theme-docs";
/>

```css
.character--selected {
position: relative;
}

/* optionally hide placeholder (in case it overlaps the cursor) */
.character--selected:not(.character--filled) {
color: transparent;
Expand All @@ -67,11 +63,6 @@ import { Callout } from "nextra-theme-docs";
width: 1px;
height: 25px;
background-color: #333;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: blink 1s infinite step-end;
}

Expand Down
4 changes: 2 additions & 2 deletions docs/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/react-verification-input/_next/static/css/dddea6f693da53a1.css" as="style"/><link rel="stylesheet" href="/react-verification-input/_next/static/css/dddea6f693da53a1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/react-verification-input/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/react-verification-input/_next/static/chunks/webpack-a75dfb0dcf3ea940.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/main-b79e7c1db0d22be6.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/pages/_app-00abc3efdcbf2bff.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/pages/_error-8353112a01355ec2.js" defer=""></script><script src="/react-verification-input/_next/static/OehuEN9cU3ThEHkQkFzH0/_buildManifest.js" defer=""></script><script src="/react-verification-input/_next/static/OehuEN9cU3ThEHkQkFzH0/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/react-verification-input/_next/static/css/dddea6f693da53a1.css" as="style"/><link rel="stylesheet" href="/react-verification-input/_next/static/css/dddea6f693da53a1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/react-verification-input/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/react-verification-input/_next/static/chunks/webpack-a75dfb0dcf3ea940.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/main-b79e7c1db0d22be6.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/pages/_app-00abc3efdcbf2bff.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/pages/_error-8353112a01355ec2.js" defer=""></script><script src="/react-verification-input/_next/static/1zE2a0ainoORoYSPBpi7g/_buildManifest.js" defer=""></script><script src="/react-verification-input/_next/static/1zE2a0ainoORoYSPBpi7g/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
body { margin: 0; color: #000; background: #fff; }
.next-error-h1 {
border-right: 1px solid rgba(0, 0, 0, .3);
Expand All @@ -9,4 +9,4 @@
.next-error-h1 {
border-right: 1px solid rgba(255, 255, 255, .3);
}
}</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"OehuEN9cU3ThEHkQkFzH0","assetPrefix":"/react-verification-input","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
}</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"1zE2a0ainoORoYSPBpi7g","assetPrefix":"/react-verification-input","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
4 changes: 2 additions & 2 deletions docs/API.html
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...c/OehuEN9cU3ThEHkQkFzH0/_buildManifest.js → ...c/1zE2a0ainoORoYSPBpi7g/_buildManifest.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 ...tic/OehuEN9cU3ThEHkQkFzH0/_ssgManifest.js → ...tic/1zE2a0ainoORoYSPBpi7g/_ssgManifest.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion docs/_next/static/chunks/nextra-data-en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"/API":{"title":"API","data":{"":""}},"/":{"title":"Demo","data":{"":"","default#Default":"Default configuration without specifying any props.\n<VerificationInput />","numbers-only#Numbers only":"Accept only numbers and use numpad on mobile devices.\n<VerificationInput validChars=\"0-9\" inputProps={{ inputMode: \"numeric\" }} />","password-mode#Password mode":"Hide the input value. This will also set the input type as password.\n<VerificationInput passwordMode={true} />","custom-length#Custom length":"Configure the input to accept 5 digits.\n<VerificationInput length={5} />","custom-placeholder#Custom placeholder":"Use any character as placeholder (empty string for no placeholder).\n<VerificationInput placeholder=\"_\" />","autofill-otp-ios#Autofill OTP (iOS)":"Let iOS read OTP codes from text message notifications (see docs).\nIn order to test this, you need to send a text message containing e.g. Code:\n123456 to your phone.\n\n<VerificationInput inputProps={{ autoComplete: \"one-time-code\" }} />"}},"/migration/v2":{"title":"Migrating to Version 2","data":{"":"This guide is aimed at developers wanting to update from v0.1.x to v2.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","rename-prop-input#Rename prop: input":"The input prop has been renamed to inputProps in order to be more explicit\nabout the props being forwarded to the input element. Also, the onChange\ncallback is now available on the top level. This matches the interface of a\nregular input element more closely (there is also a new top-level prop\nvalue).\n// v0.1.x\n<VerificationInput\ninput={{\ntype: \"tel\",\nvalue={code}\nonChange={handleCodeChange}\n}}\n/>\n\n// v2\n<VerificationInput\ninputProps={{\ntype: \"tel\",\n}}\nvalue={code}\nonChange={handleCodeChange}\n/>","remove-props-container-inputfield-characters-character#Remove props: container, inputField, characters, character":"These props have been removed. Your custom CSS classes can be passed to the\nnew classNames prop. In order to simplify the component structure, the\ncharacters element has been removed, use container instead. For more\ndetails see Styling. Additional props can no longer be forwarded\nto these elements.\n// v0.1.x\n<VerificationInput\ncontainer={{\nclassName: 'container',\n}}\ncharacters={{\nclassName: 'characters',\n}}\ncharacter={{\nclassName: 'character',\n}}\n/>\n\n// v2\n<VerificationInput\nclassNames={{\ncontainer: \"container\",\ncharacter: \"character\",\n}}\n/>","remove-prop-getinputref#Remove prop: getInputRef":"This callback has been removed. The new way to receive the input ref is to use\nthe standard ref prop. The\nresult will be a ref to the actual (invisible) input element.\n// v0.1.x\n<VerificationInput\ngetInputRef={ref => {myRef = ref}}\n/>\n\n// v2\n<VerificationInput\nref={myRef}\n/>"}},"/migration/v3":{"title":"Migrating to Version 3","data":{"":"This guide is aimed at developers wanting to update from v2.x.x to v3.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","new-prop-containerprops#New prop: containerProps":"Custom props are no longer forwarded to the container element. Use the new\nprop containerProps instead and specify the custom props in object literal\nform.\n// v2\n<VerificationInput\nid=\"input-container\"\n/>\n\n// v3\n<VerificationInput\ncontainerProps={{\nid: \"input-container\"\n}}\n/>","remove-prop-removedefaultstyles#Remove prop: removeDefaultStyles":"The removeDefaultStyles prop has been removed. Styles are now overridable by\ndefault. Thus this prop can be removed safely.\n// v2\n<VerificationInput\nremoveDefaultStyles\nclassNames={{\ncharacter: \"character\"\n}}\n/>\n\n// v3\n<VerificationInput\nclassNames={{\ncharacter: \"character\"\n}}\n/>"}},"/migration/v4":{"title":"Migrating to Version 4","data":{"":"This guide is aimed at developers wanting to update from v3.x.x to v4.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","removed-wrapper-element#Removed Wrapper Element":"The wrapper element with the class name .vi_wrapper was removed. It was inconvenient to style this element with frameworks like Tailwind, since it was not possible to set custom class names. Instead the .vi_wrapper class had to be overridden in a CSS file.If you currently rely on this class, this change might break your styling. Styles from the wrapper element should probably be moved to the container element in version 4.\n// v3\n<style>\n.vi_wrapper {\n// your custom styles\n}\n</style>\n\n<VerificationInput />\n\n// v4\n<VerificationInput classNames={{ container: \"custom-class-names\" }} />"}},"/styling":{"title":"Styling","data":{"":"","example#Example":".character {\nborder: none;\nfont-size: 20px;\nborder-radius: 8px;\n\n/* light theme */\ncolor: #272729;\nbackground-color: #f6f5fa;\nbox-shadow: 0 2px 0 #e4e2f5;\n\n/* dark theme */\ncolor: #fff;\nbackground-color: #222;\nbox-shadow: 0 2px 0 #444;\n}","with-cursor-caret#With Cursor (Caret)":".character--selected {\nposition: relative;\n}\n\n/* optionally hide placeholder (in case it overlaps the cursor) */\n.character--selected:not(.character--filled) {\ncolor: transparent;\n}\n\n.character--selected:not(.character--filled)::after {\ncontent: \"\";\nwidth: 1px;\nheight: 25px;\nbackground-color: #333;\ndisplay: block;\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\nanimation: blink 1s infinite step-end;\n}\n\n@keyframes blink {\n0% {\nopacity: 1;\n}\n50% {\nopacity: 0;\n}\n}"}}}
{"/migration/v2":{"title":"Migrating to Version 2","data":{"":"This guide is aimed at developers wanting to update from v0.1.x to v2.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","rename-prop-input#Rename prop: input":"The input prop has been renamed to inputProps in order to be more explicit\nabout the props being forwarded to the input element. Also, the onChange\ncallback is now available on the top level. This matches the interface of a\nregular input element more closely (there is also a new top-level prop\nvalue).\n// v0.1.x\n<VerificationInput\ninput={{\ntype: \"tel\",\nvalue={code}\nonChange={handleCodeChange}\n}}\n/>\n\n// v2\n<VerificationInput\ninputProps={{\ntype: \"tel\",\n}}\nvalue={code}\nonChange={handleCodeChange}\n/>","remove-props-container-inputfield-characters-character#Remove props: container, inputField, characters, character":"These props have been removed. Your custom CSS classes can be passed to the\nnew classNames prop. In order to simplify the component structure, the\ncharacters element has been removed, use container instead. For more\ndetails see Styling. Additional props can no longer be forwarded\nto these elements.\n// v0.1.x\n<VerificationInput\ncontainer={{\nclassName: 'container',\n}}\ncharacters={{\nclassName: 'characters',\n}}\ncharacter={{\nclassName: 'character',\n}}\n/>\n\n// v2\n<VerificationInput\nclassNames={{\ncontainer: \"container\",\ncharacter: \"character\",\n}}\n/>","remove-prop-getinputref#Remove prop: getInputRef":"This callback has been removed. The new way to receive the input ref is to use\nthe standard ref prop. The\nresult will be a ref to the actual (invisible) input element.\n// v0.1.x\n<VerificationInput\ngetInputRef={ref => {myRef = ref}}\n/>\n\n// v2\n<VerificationInput\nref={myRef}\n/>"}},"/":{"title":"Demo","data":{"":"","default#Default":"Default configuration without specifying any props.\n<VerificationInput />","numbers-only#Numbers only":"Accept only numbers and use numpad on mobile devices.\n<VerificationInput validChars=\"0-9\" inputProps={{ inputMode: \"numeric\" }} />","password-mode#Password mode":"Hide the input value. This will also set the input type as password.\n<VerificationInput passwordMode={true} />","custom-length#Custom length":"Configure the input to accept 5 digits.\n<VerificationInput length={5} />","custom-placeholder#Custom placeholder":"Use any character as placeholder (empty string for no placeholder).\n<VerificationInput placeholder=\"_\" />","autofill-otp-ios#Autofill OTP (iOS)":"Let iOS read OTP codes from text message notifications (see docs).\nIn order to test this, you need to send a text message containing e.g. Code:\n123456 to your phone.\n\n<VerificationInput inputProps={{ autoComplete: \"one-time-code\" }} />"}},"/migration/v3":{"title":"Migrating to Version 3","data":{"":"This guide is aimed at developers wanting to update from v2.x.x to v3.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","new-prop-containerprops#New prop: containerProps":"Custom props are no longer forwarded to the container element. Use the new\nprop containerProps instead and specify the custom props in object literal\nform.\n// v2\n<VerificationInput\nid=\"input-container\"\n/>\n\n// v3\n<VerificationInput\ncontainerProps={{\nid: \"input-container\"\n}}\n/>","remove-prop-removedefaultstyles#Remove prop: removeDefaultStyles":"The removeDefaultStyles prop has been removed. Styles are now overridable by\ndefault. Thus this prop can be removed safely.\n// v2\n<VerificationInput\nremoveDefaultStyles\nclassNames={{\ncharacter: \"character\"\n}}\n/>\n\n// v3\n<VerificationInput\nclassNames={{\ncharacter: \"character\"\n}}\n/>"}},"/migration/v4":{"title":"Migrating to Version 4","data":{"":"This guide is aimed at developers wanting to update from v3.x.x to v4.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","removed-wrapper-element#Removed Wrapper Element":"The wrapper element with the class name .vi_wrapper was removed. It was inconvenient to style this element with frameworks like Tailwind, since it was not possible to set custom class names. Instead the .vi_wrapper class had to be overridden in a CSS file.If you currently rely on this class, this change might break your styling. Styles from the wrapper element should probably be moved to the container element in version 4.\n// v3\n<style>\n.vi_wrapper {\n// your custom styles\n}\n</style>\n\n<VerificationInput />\n\n// v4\n<VerificationInput classNames={{ container: \"custom-class-names\" }} />"}},"/styling":{"title":"Styling","data":{"":"","example#Example":".character {\nborder: none;\nfont-size: 20px;\nborder-radius: 8px;\n\n/* light theme */\ncolor: #272729;\nbackground-color: #f6f5fa;\nbox-shadow: 0 2px 0 #e4e2f5;\n\n/* dark theme */\ncolor: #fff;\nbackground-color: #222;\nbox-shadow: 0 2px 0 #444;\n}","with-cursor-caret#With Cursor (Caret)":"/* optionally hide placeholder (in case it overlaps the cursor) */\n.character--selected:not(.character--filled) {\ncolor: transparent;\n}\n\n.character--selected:not(.character--filled)::after {\ncontent: \"\";\nwidth: 1px;\nheight: 25px;\nbackground-color: #333;\nanimation: blink 1s infinite step-end;\n}\n\n@keyframes blink {\n0% {\nopacity: 1;\n}\n50% {\nopacity: 0;\n}\n}"}},"/API":{"title":"API","data":{"":""}}}
2 changes: 1 addition & 1 deletion ...ic/chunks/pages/index-7c088a7fb98aa904.js → ...ic/chunks/pages/index-5e1348c5472ad3cf.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/_next/static/chunks/pages/styling-08d512bf6ca409db.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions docs/_next/static/chunks/pages/styling-338e84733d7afc34.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/index.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/migration/v2.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/migration/v3.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/migration/v4.html
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 3 additions & 12 deletions docs/styling.html
View file
Open in desktop

Large diffs are not rendered by default.