Fix the undeep selected from headless

trento-project · Jan 14, 2025 · 97146d2 · 97146d2
1 parent ec5f725
commit 97146d2
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/assets/js/common/Select/Select.jsx b/assets/js/common/Select/Select.jsx
@@ -4,7 +4,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 
 import classNames from 'classnames';
-import { find, get } from 'lodash';
+import { find, get, isEqual } from 'lodash';
 
 export const OPTION_ALL = 'all';
 
@@ -86,23 +86,26 @@ function Select({
                 value={option.value}
                 disabled={option.disabled}
               >
-                {({ selected: isSelected }) => (
-                  <>
-                    <span
-                      className={classNames('block', 'truncate', {
-                        'font-medium': isSelected,
-                        'font-normal': !isSelected,
-                      })}
-                    >
-                      {renderOption(option)}
-                    </span>
-                    {isSelected ? (
-                      <span className="absolute inset-y-0 right-2 end-1 flex items-center pl-3 text-green-600">
-                        <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                {() => {
+                  const isSelected = isEqual(option.value, value);
+                  return (
+                    <>
+                      <span
+                        className={classNames('block', 'truncate', {
+                          'font-medium': isSelected,
+                          'font-normal': !isSelected,
+                        })}
+                      >
+                        {renderOption(option)}
                       </span>
-                    ) : null}
-                  </>
-                )}
+                      {isSelected && (
+                        <span className="absolute inset-y-0 right-2 flex items-center pl-3 text-green-600">
+                          <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                        </span>
+                      )}
+                    </>
+                  );
+                }}
               </Listbox.Option>
             ))}
           </Listbox.Options>