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 { KEYS } from "../keys";
import { t } from "../i18n";
import { isWritableElement } from "../utils";
// 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
@ -39,8 +40,8 @@ const Picker = function({
// focus on first input
if (activeItem.current) {
activeItem.current.focus();
} else if (firstItem.current) {
firstItem.current.focus();
} else if (colorInput.current) {
colorInput.current.focus();
}
}, []);
@ -84,7 +85,10 @@ const Picker = function({
(gallery!.current!.children![nextIndex] as any).focus();
}
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());
(gallery!.current!.children![index] as any).focus();
e.preventDefault();
@ -200,6 +204,9 @@ const ColorInput = React.forwardRef(
onPaste={e => onChange(e.clipboardData.getData("text"))}
onBlur={() => setInnerValue(color)}
ref={inputRef}
onFocus={e => {
e.target.select();
}}
/>
</div>
);