fix application of "will-change" CSS prop on elements

Author: based-ghost

docs/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.js": "./main.f629e0d6.iframe.bundle.js",
+    "main.js": "./main.287a7ceb.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.js": "./vendors~main.31a06b8d.iframe.bundle.js",
     "vendors~main.js.map": "./vendors~main.31a06b8d.iframe.bundle.js.map",
@@ -10,6 +10,6 @@
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.31a06b8d.iframe.bundle.js",
-    "main.f629e0d6.iframe.bundle.js"
+    "main.287a7ceb.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.f629e0d6.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.287a7ceb.iframe.bundle.js"></script></body></html>

docs/main.287a7ceb.iframe.bundle.js

@@ -55,7 +55,7 @@
     "@storybook/react": "^6.2.8",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.3",
+    "@testing-library/user-event": "^13.1.4",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.41",
     "@types/react": "^17.0.3",

docs/main.f629e0d6.iframe.bundle.js

@@ -45,11 +45,11 @@ const IndicatorIcon = styled.div`
 `;
 
 const Caret = styled.div<Pick<IndicatorIconsProps, 'menuOpen' | 'isInvalid'>>`
+  will-change: transform, color;
   transition: ${({ theme }) => theme.icon.caret.transition};
   border-top: ${({ theme }) => theme.icon.caret.size} dashed;
   border-left: ${({ theme }) => theme.icon.caret.size} solid transparent;
   border-right: ${({ theme }) => theme.icon.caret.size} solid transparent;
-  will-change: transform, color;
 
   ${({ theme, menuOpen, isInvalid }) =>
     menuOpen &&

package.json

@@ -32,7 +32,7 @@ const MenuWrapper = styled.div<MenuWrapperProps>`
   z-index: 999;
   cursor: default;
   position: absolute;
-  will-change: opacity, box-shadow, display;
+  will-change: opacity;
 
   ${({ menuTop, menuOpen, hideNoOptionsMsg, theme: { menu } }) => css`
     width: ${menu.width};
@@ -55,9 +55,9 @@ const MenuWrapper = styled.div<MenuWrapperProps>`
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-tap-highlight-color: transparent;
+    will-change: top, color, background-color;
 	  padding: ${({ theme }) => theme.menu.option.padding};
 	  text-align: ${({ theme }) => theme.menu.option.textAlign};
-    will-change: top, opacity, color, background-color;
 
     &.${OPTION_FOCUSED_CLS},
     &:hover:not(.${OPTION_DISABLED_CLS}):not(.${OPTION_SELECTED_CLS}) {

src/components/indicators/IndicatorIcons.tsx

@@ -12,7 +12,7 @@ export type MultiValueProps = SelectedOption & Readonly<{
   removeSelectedOption: (value?: ReactText) => void;
 }>;
 
-const _clearIconFocusStyle  = css`
+const CLEAR_ICON_FOCUS_STYLE  = css`
   z-index: 5000;
   transform: scale(1.26);
   color: ${({ theme }) => theme.multiValue.clear.focusColor};
@@ -21,7 +21,6 @@ const _clearIconFocusStyle  = css`
 const MultiValueWrapper = styled.div`
   min-width: 0;
   display: flex;
-  will-change: opacity;
 
   ${({ theme: { multiValue } }) => css`
     margin: ${multiValue.margin};
@@ -55,11 +54,11 @@ const Clear = styled.i<Pick<MultiValueProps, 'isFocused'>>`
     font-weight: ${clear.fontWeight};
 
     :hover {
-      ${_clearIconFocusStyle}
+      ${CLEAR_ICON_FOCUS_STYLE}
     }
   `}
 
-   ${({ isFocused }) => isFocused && _clearIconFocusStyle}
+   ${({ isFocused }) => isFocused && CLEAR_ICON_FOCUS_STYLE}
 `;
 
 const MultiValue = memo<MultiValueProps>(({