taler-typescript-core

commit fa52e25e2a54805e6bc3c753c7b0f1325c3677bc
parent afde176e9b70e721190bc2564b966c83432d7270
Author: Sebastian <sebasjm@gmail.com>
Date:   Tue, 11 Feb 2025 12:17:17 -0300

fix #9514

Diffstat:
M
packages/merchant-backoffice-ui/src/components/form/InputSearchOnList.tsx
 | 
28
+++++++++++++++++++---------

1 file changed, 19 insertions(+), 9 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSearchOnList.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSearchOnList.tsx
@@ -27,7 +27,7 @@ import { InputWithAddon } from "./InputWithAddon.js";
 import { TranslatedString } from "@gnu-taler/taler-util";
 
 type Entity = {
-  id: string,
+  id: string;
   description: string;
   image?: string;
   extra?: string;
@@ -64,13 +64,13 @@ export function InputSearchOnList<T extends Entity>({
   if (selected) {
     return (
       <article class="media">
-        {withImage &&
+        {withImage && (
           <figure class="media-left">
             <p class="image is-128x128">
               <img src={selected.image ? selected.image : emptyImage} />
             </p>
           </figure>
-        }
+        )}
         <div class="media-content">
           <div class="content">
             <p class="media-meta">
@@ -85,7 +85,7 @@ export function InputSearchOnList<T extends Entity>({
                 class="button is-info"
                 onClick={() => onChange(undefined)}
               >
-                clear
+                <i18n.Translate>Clear</i18n.Translate>
               </button>
             </div>
           </div>
@@ -133,7 +133,12 @@ interface DropdownListProps<T extends Entity> {
   withImage: boolean;
 }
 
-export function DropdownList<T extends Entity>({ name, onSelect, list, withImage }: DropdownListProps<T>) {
+export function DropdownList<T extends Entity>({
+  name,
+  onSelect,
+  list,
+  withImage,
+}: DropdownListProps<T>) {
   const { i18n } = useTranslationContext();
   if (!name) {
     /* FIXME
@@ -146,8 +151,10 @@ export function DropdownList<T extends Entity>({ name, onSelect, list, withImage
       </div>
     );
   }
+
+  const MATCH_NAME = new RegExp(name, "i");
   const filtered = list.filter(
-    (p) => p.id.includes(name) || p.description.includes(name),
+    (p) => MATCH_NAME.test(p.id) || MATCH_NAME.test(p.description),
   );
 
   return (
@@ -174,7 +181,7 @@ export function DropdownList<T extends Entity>({ name, onSelect, list, withImage
                 style={{ cursor: "pointer" }}
               >
                 <article class="media">
-                  {withImage &&
+                  {withImage && (
                     <div class="media-left">
                       <div class="image" style={{ minWidth: 64 }}>
                         <img
@@ -183,11 +190,14 @@ export function DropdownList<T extends Entity>({ name, onSelect, list, withImage
                         />
                       </div>
                     </div>
-                  }
+                  )}
                   <div class="media-content">
                     <div class="content">
                       <p>
-                        <strong>{p.id}</strong> {p.extra !== undefined ? <small>{p.extra}</small> : undefined}
+                        <strong>{p.id}</strong>{" "}
+                        {p.extra !== undefined ? (
+                          <small>{p.extra}</small>
+                        ) : undefined}
                         <br />
                         {p.description}
                       </p>