bugfix(react-tag-picker): ensures input behaviour on text selection (#…

…32285)
microsoft · Aug 21, 2024 · 843386f · 843386f
1 parent 9c8b306
commit 843386f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/change/@fluentui-react-tag-picker-93adf770-e205-4d89-9513-308f47d37af6.json b/change/@fluentui-react-tag-picker-93adf770-e205-4d89-9513-308f47d37af6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: ensures input behaviour on text selection",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.cy.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.cy.tsx
@@ -302,17 +302,43 @@ describe('TagPicker', () => {
         cy.get(`[data-testid="tag--${options[0]}"]`).focus().realPress('Backspace').should('not.exist');
         cy.get(`[data-testid="tag--${options[1]}"]`).should('be.focused');
       });
-      it('should move to last tag on Backspace key press on input', () => {
-        mount(<TagPickerControlled defaultSelectedOptions={options} />);
-        cy.get('[data-testid="tag-picker-input"]').focus().realPress('Backspace');
-        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('be.focused');
-      });
+
       it('should focus on input once all tags have been removed', () => {
         mount(<TagPickerControlled defaultSelectedOptions={[options[0]]} />);
         cy.get(`[data-testid="tag--${options[0]}"]`).focus().realPress('Backspace').should('not.exist');
         cy.get('[data-testid="tag-picker-input"]').should('be.focused');
       });
     });
+    describe('input', () => {
+      it('should move to last tag on Backspace key press on input, when input is empty', () => {
+        mount(<TagPickerControlled defaultSelectedOptions={options} />);
+        cy.get('[data-testid="tag-picker-input"]').focus().realPress('Backspace');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('be.focused');
+      });
+      it('should delete input content on Backspace when input is not empty', () => {
+        mount(<TagPickerControlled defaultSelectedOptions={options} />);
+        cy.get('[data-testid="tag-picker-input"]').focus().realType('Some Text').realPress('Backspace');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('not.be.focused');
+        cy.get('[data-testid="tag-picker-input"]').should('have.value', 'Some Tex').should('be.focused');
+      });
+      it('should move to last tag on Backspace key press on input, when input is not empty but the cursor is on the first character', () => {
+        mount(<TagPickerControlled defaultSelectedOptions={options} />);
+        cy.get('[data-testid="tag-picker-input"]').focus().realType('SomeText').realPress('Backspace');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('not.be.focused');
+        cy.get('[data-testid="tag-picker-input"]').should('have.value', 'SomeTex').should('be.focused');
+        cy.get('[data-testid="tag-picker-input"]').realPress(['ControlLeft', 'ArrowLeft']).realPress('Backspace');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('be.focused');
+      });
+      it('should delete input content on Backspace when input is not empty and selected', () => {
+        mount(<TagPickerControlled defaultSelectedOptions={options} />);
+        cy.get('[data-testid="tag-picker-input"]').focus().realType('SomeText').realPress('Backspace');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('not.be.focused');
+        cy.get('[data-testid="tag-picker-input"]').should('have.value', 'SomeTex').should('be.focused');
+        cy.get('[data-testid="tag-picker-input"]').realPress(['ControlLeft', 'A']).realPress('Backspace');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('not.be.focused');
+        cy.get('[data-testid="tag-picker-input"]').should('have.value', '').should('be.focused');
+      });
+    });
   });
   it('should not render popover when "noPopover"', () => {
     mount(<TagPickerControlled noPopover />);

diff --git a/...t-components/react-tag-picker/library/src/components/TagPickerInput/useTagPickerInput.tsx b/...t-components/react-tag-picker/library/src/components/TagPickerInput/useTagPickerInput.tsx
@@ -85,6 +85,7 @@ export const useTagPickerInput_unstable = (
         if (
           (event.key === ArrowLeft || event.key === Backspace) &&
           event.currentTarget.selectionStart === 0 &&
+          event.currentTarget.selectionEnd === 0 &&
           tagPickerGroupRef.current
         ) {
           findLastFocusable(tagPickerGroupRef.current)?.focus();