#557 - Fix for dropdown of the tag picker

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)
 

src/dashboardWebView/components/DataView/DataForm.tsx

@@ -48,7 +48,6 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
         if (validator(crntModel)) {
           return null;
         } else {
-          console.log(validator.errors)
           return { details: validator.errors }
         }
       };

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);
   }
 
   /**

src/panelWebView/components/TagPicker.tsx

@@ -273,6 +273,38 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = ({
     );
   }, [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<ITagPickerProps> = ({
 
             <ul
               className={`article__tags__dropbox ${isOpen ? 'open' : 'closed'}`}
+              style={{
+                bottom: dropdownStyle(isOpen)
+              }}
               {...getMenuProps()}
             >
               {isOpen