Browse Source

Improve keyboard handling

Use keyboard shortcut on toggling maskedtextinput visibility.
master
TheoryOfNekomata 1 year ago
parent
commit
12ec7d4207
1 changed files with 15 additions and 1 deletions
  1. +15
    -1
      categories/freeform/react/src/components/MaskedTextInput/index.tsx

+ 15
- 1
categories/freeform/react/src/components/MaskedTextInput/index.tsx View File

@@ -60,6 +60,7 @@ export const MaskedTextInput = React.forwardRef<
style,
length,
disabled,
onKeyUp,
...etcProps
}: MaskedTextInputProps,
forwardedRef,
@@ -70,6 +71,17 @@ export const MaskedTextInput = React.forwardRef<
const id = idProp ?? defaultId;
const [visible, setVisible] = React.useState(false);

const handleKeyUp: React.KeyboardEventHandler<MaskedTextInputDerivedElement> = React.useCallback((e) => {
if (e.ctrlKey && e.code === 'Space') {
setVisible((prev) => !prev);
}
onKeyUp?.(e);
}, [onKeyUp]);

const handleToggleVisible = React.useCallback(() => {
setVisible((prev) => !prev);
}, []);

return (
<div
className={clsx(
@@ -121,6 +133,7 @@ export const MaskedTextInput = React.forwardRef<
aria-labelledby={labelId}
type={!visible ? 'password' : 'text'}
data-testid="input"
onKeyUp={handleKeyUp}
className={clsx(
'bg-negative rounded-inherit w-full peer block font-inherit',
'focus:outline-0',
@@ -188,6 +201,7 @@ export const MaskedTextInput = React.forwardRef<
disabled={disabled}
type="button"
data-testid="indicator"
tabIndex={-1}
className={clsx(
'text-center z-[1] focus:outline-0 flex items-center justify-center aspect-square absolute bottom-0 right-0 select-none text-primary group-focus-within:text-secondary',
{
@@ -196,7 +210,7 @@ export const MaskedTextInput = React.forwardRef<
'w-16': size === 'large',
},
)}
onClick={() => { setVisible((b) => !b); }}
onClick={handleToggleVisible}
>
<svg
className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"


Loading…
Cancel
Save