diff --git a/CHANGELOG.md b/CHANGELOG.md index ce877717..c2c20144 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -60,6 +60,7 @@ If you're not already a sponsor, now is a great time to consider supporting the - [#543](https://github.com/estruyf/vscode-front-matter/issues/543): Fix JSON schema for script commands - [#547](https://github.com/estruyf/vscode-front-matter/issues/547): Fix setting default value in a hidden group field (`block`) - [#552](https://github.com/estruyf/vscode-front-matter/issues/552): Fix for content retrieval in multi-root workspaces +- [#557](https://github.com/estruyf/vscode-front-matter/issues/557): Fix for dropdown of the tag picker ## [8.3.0] - 2023-02-14 - [Release notes](https://beta.frontmatter.codes/updates/v8.3.0) diff --git a/src/dashboardWebView/components/DataView/DataForm.tsx b/src/dashboardWebView/components/DataView/DataForm.tsx index fb87fe87..bd3a969a 100644 --- a/src/dashboardWebView/components/DataView/DataForm.tsx +++ b/src/dashboardWebView/components/DataView/DataForm.tsx @@ -48,7 +48,6 @@ export const DataForm: React.FunctionComponent = ({ if (validator(crntModel)) { return null; } else { - console.log(validator.errors) return { details: validator.errors } } }; diff --git a/src/helpers/SettingsHelper.ts b/src/helpers/SettingsHelper.ts index 1694988c..42c23e49 100644 --- a/src/helpers/SettingsHelper.ts +++ b/src/helpers/SettingsHelper.ts @@ -109,7 +109,6 @@ export class Settings { public static setProject(value: string) { Extension.getInstance().setState(ExtensionState.Project.current, value, 'workspace'); Settings.project = Settings.getProjects().find((p) => p.name === value); - console.log('setProject', Settings.project); } /** diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx index 2f9820e0..2a5f775d 100644 --- a/src/panelWebView/components/TagPicker.tsx +++ b/src/panelWebView/components/TagPicker.tsx @@ -273,6 +273,38 @@ const TagPicker: React.FunctionComponent = ({ ); }, [settings?.aiEnabled, label, type]); + const dropdownStyle = useCallback((isOpen) => { + if (isOpen && inputRef.current) { + const wrapper = inputRef.current.closest(".collapsible__body"); + const dropdown = inputRef.current.parentElement?.parentElement?.querySelector('.article__tags__dropbox'); + + if (!wrapper || !dropdown) { + return undefined; + } + + const wrapperStyles = getComputedStyle(wrapper); + const padding = parseInt(wrapperStyles.paddingTop) + parseInt(wrapperStyles.paddingBottom); + const wrapperHeight = wrapper.clientHeight - padding; + + const tagPickerElm = inputRef.current.parentElement?.parentElement; + const dropdownHeight = dropdown?.clientHeight; + + if (!tagPickerElm || !dropdownHeight) { + return undefined; + } + + const tagPickerTop = tagPickerElm.offsetTop; + + const fullHeight = tagPickerTop + dropdownHeight; + + if (fullHeight > wrapperHeight) { + return "calc(100% - 38px)"; + } + } + + return undefined; + }, [inputRef]); + useEffect(() => { setTimeout(() => { triggerFocus(); @@ -370,6 +402,9 @@ const TagPicker: React.FunctionComponent = ({
    {isOpen