Merge pull request #952 from Vizzuality/client/bugfix/LANDGRIF-1318-u…

…ser-should-not-be-able-to-select-a-disabled-material

Fix selector allowing to select disabled options on search

client/CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Replaced Deck.gl map with `react-map-gl` to prepare migration to Layer Manager. [LANDGRIF-812](https://vizzuality.atlassian.net/browse/LANDGRIF-812)
 
 ### Fixed
+- Fix selectors allowing select disabled options when searching [LANDGRIF-1318](https://vizzuality.atlassian.net/browse/LANDGRIF-1318)
 - Wrong error message in the scenario creation [LANDGRIF-1302](https://vizzuality.atlassian.net/browse/LANDGRIF-1302)
 - Fix map resizing when sidebar is collapsed [LANDGRIF-1305](https://vizzuality.atlassian.net/browse/LANDGRIF-1305)
 - Uploading excel [LANDGRIF-1304](https://vizzuality.atlassian.net/browse/LANDGRIF-1304)

client/src/components/tree-select/search-overlay.tsx

@@ -13,32 +13,32 @@ interface SearchOverlayProps {
   options: (WithRequiredProperty<Partial<FlattenNode<TreeDataNode>>, 'key' | 'title'> & {
     isSelected: boolean;
     matchingParts: MatchResult[];
+    disabled?: boolean;
   })[];
   onChange: Dispatch<Key>;
 }
 
 const SearchOverlay = ({ options, onChange }: SearchOverlayProps) => {
   const getHandleChange = useCallback(
-    (value: TreeSelectOption['value']) => () => {
-      onChange(value);
-    },
+    (value: TreeSelectOption['value']) => onChange(value),
     [onChange],
   );
 
   return (
     <div data-testid="tree-select-search-results">
-      {options.map(({ matchingParts, data: { label }, key, isSelected, parent }) => {
+      {options.map(({ matchingParts, data: { label }, key, isSelected, parent, disabled }) => {
         const parents = getParents({ parent } as FlattenNode<TreeDataNode>);
         return (
           <button
             title={label}
             type="button"
-            className={classNames(
-              'text-sm p-2 hover:bg-navy-50 cursor-pointer w-full text-left',
-              isSelected ? 'font-bold text-navy-400' : 'text-gray-900',
-            )}
+            className={classNames('text-sm p-2 w-full text-left', {
+              'font-bold cursor-pointer text-navy-400 hover:bg-navy-50': isSelected,
+              'text-gray-300 hover:bg-white cursor-default pointer-events-none': disabled,
+              'text-gray-900 cursor-pointer hover:bg-navy-50': !isSelected && !disabled,
+            })}
             key={key}
-            onClick={getHandleChange(key as string)}
+            onClick={() => !disabled && getHandleChange(key as string)}
           >
             {matchingParts.map(({ value, isMatch }, i) => {
               return (