SearchBox: disable pointer events when is focused (backport to v7) (#…

…20971) * SearchBox: disable pointer events when is focused * Change files
microsoft · Dec 9, 2021 · 067520e · 067520e
1 parent 4448d43
commit 067520e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/change/office-ui-fabric-react-579113f5-8058-4625-9203-afb7a4dfb932.json b/change/office-ui-fabric-react-579113f5-8058-4625-9203-afb7a4dfb932.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "SearchBox: disable pointer events when is focused",
+  "packageName": "office-ui-fabric-react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx
@@ -77,6 +77,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
             },
             [`:hover .${classNames.icon}`]: {
               opacity: 0,
+              pointerEvents: 'none',
             },
           },
         },
@@ -151,6 +152,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
       },
       hasFocus && {
         opacity: 0,
+        pointerEvents: 'none',
       },
       !disableAnimation && {
         transition: `opacity ${AnimationVariables.durationValue1} 0s`,