From 48a43088b693fdcadf89872d6e34857000a5ce5e Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 21 May 2024 23:53:15 +0200
Subject: [PATCH] More UI fixes.

---
 .../src/app/framework/react/ListSearch.tsx    | 20 +++++++++++--------
 frontend/src/app/style/_apps.scss             |  8 --------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/framework/react/ListSearch.tsx b/frontend/src/app/framework/react/ListSearch.tsx
index 8500030d..20777160 100644
--- a/frontend/src/app/framework/react/ListSearch.tsx
+++ b/frontend/src/app/framework/react/ListSearch.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import { InputProps } from 'reactstrap';
 import { ListState, Query } from './../model';
 import { ClearInput } from './ClearInput';
-import { useDebounce, useEventCallback } from './hooks';
+import { useEventCallback } from './hooks';
 
 export interface ListSearchProps extends Pick<InputProps, Exclude<keyof InputProps, 'list'>> {
     // The bootstrap size.
@@ -37,13 +37,17 @@ export const ListSearch = (props: ListSearchProps) => {
 
     const [search, setSearch] = React.useState<string>();
 
-    const debouncedSearch = useDebounce(search, 3000);
-
     React.useEffect(() => {
-        if (hasChanged(list.search, debouncedSearch) && onSearch) {
-            onSearch({ search: debouncedSearch });
-        }
-    }, [debouncedSearch, list, onSearch]);
+        const timer = setTimeout(() => {
+            if (hasChanged(list.search, search) && onSearch) {
+                onSearch({ search });
+            }
+        }, 3000);
+
+        return () => {
+            clearInterval(timer);
+        };
+    }, [list, search, onSearch]);
 
     React.useEffect(() => {
         setSearch(list.search);
@@ -66,7 +70,7 @@ export const ListSearch = (props: ListSearchProps) => {
     });
 
     return (
-        <ClearInput {...other} value={search || ''} disabled={list.isLoading}
+        <ClearInput {...other} value={search || ''} readOnly={list.isLoading}
             onClear={doClear}
             onChange={doChange}
             onKeyPress={doPress}
diff --git a/frontend/src/app/style/_apps.scss b/frontend/src/app/style/_apps.scss
index 8f58da5c..34023f91 100644
--- a/frontend/src/app/style/_apps.scss
+++ b/frontend/src/app/style/_apps.scss
@@ -23,14 +23,6 @@
 }
 
 .apps-dropdown {
-    &-name {
-        @include truncate;
-        display: inline-block;
-        line-height: 1;
-        list-style: none;
-        max-width: 10rem;
-    }
-
     .dropdown-menu {
         margin-bottom: 0;
         margin-top: 1rem !important;