chore(search): apply latest changes from #1043

vtex · Nov 30, 2023 · 9b3b600 · 9b3b600
1 parent 5e903ce
commit 9b3b600
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/components/src/search/search.css b/packages/components/src/search/search.css
@@ -23,15 +23,18 @@
 
     &:focus-within {
       box-shadow: var(--sl-focus-ring);
+      border: var(--sl-border-strong-hover);
     }
 
     &[data-disabled='true'] {
       border: var(--sl-border-disabled);
       background-color: var(--sl-bg-disabled);
       color: var(--sl-fg-disabled);
 
-      & > [data-sl-pre-icon] {
-        color: inherit;
+      &:not([data-loading='true']) {
+        & > [data-sl-pre-icon] {
+          color: inherit;
+        }
       }
 
       & > [data-sl-search-input] {

diff --git a/packages/components/src/search/search.tsx b/packages/components/src/search/search.tsx
@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react'
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import { IconButton } from '../icon-button'
 import { IconMagnifyingGlassSmall, IconXCircle } from '@vtex/shoreline-icons'
 import { useId } from '@vtex/shoreline-utils'
@@ -25,12 +25,25 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(
 
   const id = useId(defaultId)
 
+  let defaultRef = useRef<HTMLInputElement | null>(null)
+
+  if (ref) {
+    defaultRef = ref as React.MutableRefObject<HTMLInputElement | null>
+  }
+
+  const handleFocusFromParent = () => {
+    if (defaultRef.current) {
+      defaultRef.current.focus()
+    }
+  }
+
   return (
     <div
       className={className}
       data-disabled={disabled}
       data-loading={loading}
       data-sl-search
+      onClick={handleFocusFromParent}
     >
       {loading ? (
         <Spinner data-sl-pre-icon />
@@ -40,7 +53,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(
       <input
         id={id}
         data-sl-search-input
-        ref={ref}
+        ref={defaultRef}
         disabled={disabled}
         value={value}
         placeholder={placeholder}
@@ -50,7 +63,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(
       <VisuallyHidden>
         <label htmlFor={id}>{placeholder}</label>
       </VisuallyHidden>
-      {(value || defaultValue) && typeof onClear !== undefined ? (
+      {!disabled && value && typeof onClear !== undefined ? (
         <IconButton
           label="Clear"
           onClick={onClear}