sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix typing into color picker popup text field (#694)

Browse Source 
Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Bakhtiiar Muzakparov 2020-02-04 13:28:22 +00:00 committed by GitHub
parent 954d805cb3
commit 173fe093b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ColorPicker.tsx
View File

@ -4,6 +4,7 @@ import { Popover } from "./Popover";
import "./ColorPicker.css"; import "./ColorPicker.css";
import { KEYS } from "../keys"; import { KEYS } from "../keys";
import { t } from "../i18n"; import { t } from "../i18n";
import { isWritableElement } from "../utils";
// This is a narrow reimplementation of the awesome react-color Twitter component // This is a narrow reimplementation of the awesome react-color Twitter component
// https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js // https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
@ -39,8 +40,8 @@ const Picker = function({
// focus on first input // focus on first input
if (activeItem.current) { if (activeItem.current) {
activeItem.current.focus(); activeItem.current.focus();
} else if (firstItem.current) { } else if (colorInput.current) {
firstItem.current.focus(); colorInput.current.focus();
} }
}, []); }, []);
@ -84,7 +85,10 @@ const Picker = function({
(gallery!.current!.children![nextIndex] as any).focus(); (gallery!.current!.children![nextIndex] as any).focus();
} }
e.preventDefault(); e.preventDefault();
} else if (keyBindings.includes(e.key.toLowerCase())) { } else if (
keyBindings.includes(e.key.toLowerCase()) &&
!isWritableElement(e.target)
) {
const index = keyBindings.indexOf(e.key.toLowerCase()); const index = keyBindings.indexOf(e.key.toLowerCase());
(gallery!.current!.children![index] as any).focus(); (gallery!.current!.children![index] as any).focus();
e.preventDefault(); e.preventDefault();
@ -200,6 +204,9 @@ const ColorInput = React.forwardRef(
onPaste={e => onChange(e.clipboardData.getData("text"))} onPaste={e => onChange(e.clipboardData.getData("text"))}
onBlur={() => setInnerValue(color)} onBlur={() => setInnerValue(color)}
ref={inputRef} ref={inputRef}
onFocus={e => {
e.target.select();
}}
/> />
</div> </div>
); );