Improve resizing, remove important from styles

3 files changed, 6 insertions, 12 deletions

diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
index b5714ca4..1a61e90f 100644
--- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
@@ -17,8 +17,8 @@ div#paneSearch {
     }
     
     .navigation-pane-search {
-        width: 100% !important;
         padding-top: 16px;
+        width: 100%;
     }
 
     div.paneSearchInputWrapper {
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
index 3174b023..47323e73 100644
--- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
@@ -6,11 +6,8 @@ import './navigationPaneSearch.scss';
 import ClearIcon from 'react-svg-loader!./clear.svg';
 
 export const NavigationPaneSearch = () => {
-    const defaultWidth = 300
-
     const [navigationList, setNavigationList] = useState<Option[]>([]);
     const [selected, onSelected] = useState<Option | null>(null);
-    const [minWidth, setMinWidth] = useState<number>(defaultWidth);
     const [filterValue, setFilterValue] = useState<string>('')
     
     const onChangeSelected = useCallback(
@@ -21,11 +18,7 @@ export const NavigationPaneSearch = () => {
         [selected]
     );
 
-    const onFilter = (filterValue: string, filteredRecords?: Option[]) => {
-        if(filteredRecords){
-            const requiredWidth = Math.max(...filteredRecords.map(e => e.label.length*9), defaultWidth)
-            setMinWidth(requiredWidth)
-        }
+    const onFilter = (filterValue: string) => {
         setFilterValue(filterValue)
     }
 
@@ -39,9 +32,10 @@ export const NavigationPaneSearch = () => {
         fetch(url)
             .then(response => response.json())
             .then((result) => {
-                setNavigationList(result.map((record: Option) => {
+                setNavigationList(result.map((record: Option, idx: number) => {
                     return {
                         ...record,
+                        key: idx,
                         rgItemType: List.ListProps.Type.CUSTOM
                     }
                 }))
@@ -66,7 +60,7 @@ export const NavigationPaneSearch = () => {
                     popupClassName={"navigation-pane-popup"}
                     onSelect={onChangeSelected}
                     onFilter={onFilter}
-                    minWidth={minWidth}
+                    renderOptimization={false}
                 />
                 <span className={"paneSearchInputClearIcon"} onClick={onClearClick}><ClearIcon /></span>
         </div>
diff --git a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
index 2d9dcb3d..164a925a 100644
--- a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
+++ b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
@@ -68,7 +68,7 @@ export class DokkaFuzzyFilterComponent extends Select {
             })
             .filter((record: OptionWithSearchResult) => record.matched)
 
-        this.props.onFilter(filterPhrase, matchedRecords)
+        this.props.onFilter(filterPhrase)
 
         return highlightMatchedPhrases(orderRecords(matchedRecords, filterPhrase))
     }