diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ae8525c..bd170853 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,12 @@ # Change Log +## [1.11.1] - 2020-12-10 + +- [#26](https://github.com/estruyf/vscode-front-matter/issues/26): Fix for arrow selection in the dropdown. + ## [1.11.0] - 2020-12-10 -- Moved from Material UI Autocomplete to Downshift. This gives more flexibility, and allows to focus the inputs from a VSCode command. +- [#25](https://github.com/estruyf/vscode-front-matter/issues/25): Moved from Material UI Autocomplete to Downshift. This gives more flexibility, and allows to focus the inputs from a VSCode command. - Changed the `Front Matter: Insert ` functionality to open in the panel, instead of using the VSCode dialogs. ## [1.10.0] - 2020-12-03 diff --git a/assets/media/styles.css b/assets/media/styles.css index eef8e641..973a3ea9 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -104,10 +104,25 @@ border: 1px solid rgba(0, 0, 0, .9); } -.article__tags input { +.article__tags__input input { border: 1px solid var(--vscode-inputValidation-infoBorder); } +.article__tags__input.freeform { + position: relative; +} + +.article__tags__input.freeform input { + padding-right: 35px; +} + +.article__tags__input button { + position: absolute; + top: 1px; + right: 1px; + width: 30px; +} + .article__tags ul { color: var(--vscode-dropdown-foreground); background-color: var(--vscode-dropdown-background); diff --git a/src/viewpanel/components/TagPicker.tsx b/src/viewpanel/components/TagPicker.tsx index 10a5bbeb..bf6d8551 100644 --- a/src/viewpanel/components/TagPicker.tsx +++ b/src/viewpanel/components/TagPicker.tsx @@ -58,7 +58,7 @@ export const TagPicker: React.FunctionComponent = (props: React if (focussed && inputRef && inputRef.current) { inputRef.current.focus(); } - } + }; /** * On item selection @@ -67,30 +67,30 @@ export const TagPicker: React.FunctionComponent = (props: React */ const onSelect = (selectedItem: string | null) => { if (selectedItem) { - const uniqValues = Array.from(new Set([...selected, selectedItem])); + let value = selectedItem || ""; + + const item = options.find(o => o.toLowerCase() === selectedItem.toLowerCase()); + if (item) { + value = item; + } + + const uniqValues = Array.from(new Set([...selected, value])); setSelected(uniqValues); sendUpdate(uniqValues); setInputValue(""); } - } + }; /** - * Allow free value entries - * @param event + * Inserts a tag which is not known + * @param closeMenu */ - const onEnterSelection = (event: React.KeyboardEvent, closeCb: () => void) => { - if (freeform && event.key === "Enter" && inputValue) { + const insertUnkownTag = (closeMenu: (cb?: any) => void) => { + if (inputValue) { onSelect(inputValue); - - if (closeCb) { - closeCb(); - } - } else if (event.key === "Escape") { - if (closeCb) { - closeCb(); - } + closeMenu(); } - } + }; /** * Filters the options which can be selected @@ -99,7 +99,7 @@ export const TagPicker: React.FunctionComponent = (props: React */ const filterList = (option: string, inputValue: string | null) => { return !selected.includes(option) && option.toLowerCase().includes((inputValue || "").toLowerCase()); - } + }; React.useEffect(() => { setTimeout(() => { @@ -118,18 +118,37 @@ export const TagPicker: React.FunctionComponent = (props: React

{type}

onSelect(selected || "")} itemToString={item => (item ? item : '')} inputValue={inputValue} onInputValueChange={(value) => setInputValue(value)}> { - ({ getInputProps, getItemProps, getMenuProps, isOpen, inputValue, getRootProps, openMenu, closeMenu }) => ( + ({ getInputProps, getItemProps, getMenuProps, isOpen, inputValue, getRootProps, openMenu, closeMenu, clearSelection }) => ( <> -
- { closeMenu(); unsetFocus(); } } - placeholder={`Pick your ${type.toLowerCase()}`} - onKeyDown={(e) => onEnterSelection(e, closeMenu)} /> +
+ { + closeMenu(); + unsetFocus(); + if (!inputValue) { + clearSelection(); + } + } + }) + } + placeholder={`Pick your ${type.toLowerCase()}`} /> + + { + freeform && ( + + ) + }
    @@ -146,7 +165,7 @@ export const TagPicker: React.FunctionComponent = (props: React } - + a.toLowerCase() < b.toLowerCase() ? -1 : 1 )} onRemove={onRemove} onCreate={onCreate} options={options} />
); }; \ No newline at end of file