fix(react-color-picker): active axis for ColorPicker (#33415)

microsoft · Dec 11, 2024 · b9a11c5 · b9a11c5
1 parent 221a380
commit b9a11c5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json b/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-color-picker): active axis for ColorPicker",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...t-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.cy.tsx b/...t-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.cy.tsx
@@ -24,7 +24,7 @@ describe('ColorArea', () => {
   describe('keyboard navigation', () => {
     it('color should be changed correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 324, s: 0.5, v: 0.5 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowDown');
       cy.get('#color').should('have.text', '#7d3e64');
       cy.realPress('ArrowDown');
@@ -45,7 +45,7 @@ describe('ColorArea', () => {
     });
     it('color selected on right edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 106, s: 0.96, v: 0.1 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowRight');
       cy.get('#color').should('have.text', '#071a01');
       cy.realPress('ArrowRight');
@@ -55,7 +55,7 @@ describe('ColorArea', () => {
     });
     it('color selected on bottom edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 111, s: 1, v: 0.03 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowDown');
       cy.get('#color').should('have.text', '#010500');
       cy.realPress('ArrowDown');
@@ -65,7 +65,7 @@ describe('ColorArea', () => {
     });
     it('color selected on left edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 111, s: 0.03, v: 0.45 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowLeft');
       cy.get('#color').should('have.text', '#717370');
       cy.realPress('ArrowLeft');
@@ -75,7 +75,7 @@ describe('ColorArea', () => {
     });
     it('color selected on top edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 106, s: 1, v: 0.97 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowUp');
       cy.get('#color').should('have.text', '#3afa00');
       cy.realPress('ArrowUp');
@@ -85,7 +85,7 @@ describe('ColorArea', () => {
     });
     it('hue stays the same after achiving bottom edge', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 111, s: 1, v: 0.03 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowDown');
       cy.realPress('ArrowDown');
       cy.realPress('ArrowDown');

diff --git a/...components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx b/...components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx
@@ -23,7 +23,6 @@ describe('ColorArea', () => {
             <input
               class="fui-ColorArea__inputX"
               id="sliderX-15"
-              tabindex="0"
               type="range"
               value="100"
             />

diff --git a/...ct-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts b/...ct-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts
@@ -48,7 +48,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
   const saturation = Math.round(hsvColor.s * 100);
   const value = Math.round(hsvColor.v * 100);
 
-  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y'>('x');
+  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);
 
   const requestColorChange = useEventCallback((event: MouseEvent) => {
     if (!rootRef.current) {
@@ -208,17 +208,5 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
   state.inputX.value = saturation;
   state.inputY.value = value;
 
-  React.useEffect(() => {
-    // Focus the active axis input only when the active axis changes
-
-    if (activeAxis === 'x' && targetDocument?.activeElement !== xRef.current) {
-      xRef.current?.focus();
-    }
-
-    if (activeAxis === 'y' && targetDocument?.activeElement !== yRef.current) {
-      yRef.current?.focus();
-    }
-  }, [activeAxis, targetDocument?.activeElement]);
-
   return state;
 };