SearchBox: disable pointer events when is focused (#20951)

* SearchBox: disable pointer events when is focused * Change files * fix hover behavior
microsoft · Dec 7, 2021 · d5d3ef6 · d5d3ef6
1 parent 35b607a
commit d5d3ef6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/change/@fluentui-react-44f941a3-4706-4f1c-bf01-5d6d06975a09.json b/change/@fluentui-react-44f941a3-4706-4f1c-bf01-5d6d06975a09.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "SearchBox: disable pointer events when is focused",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/SearchBox/SearchBox.styles.tsx b/packages/react/src/components/SearchBox/SearchBox.styles.tsx
@@ -77,6 +77,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
             },
             [`:hover .${classNames.icon}`]: {
               opacity: 0,
+              pointerEvents: 'none',
             },
           },
         },
@@ -167,6 +168,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
       },
       hasFocus && {
         opacity: 0,
+        pointerEvents: 'none',
       },
       !disableAnimation && {
         transition: `opacity ${AnimationVariables.durationValue1} 0s`,