diff --git a/change/@fluentui-react-table-24acf280-2591-45d6-b5d8-5cf081f5794e.json b/change/@fluentui-react-table-24acf280-2591-45d6-b5d8-5cf081f5794e.json new file mode 100644 index 00000000000000..ef04a504472f47 --- /dev/null +++ b/change/@fluentui-react-table-24acf280-2591-45d6-b5d8-5cf081f5794e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: adds test to ensure combobox on Table behavior", + "packageName": "@fluentui/react-table", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-95b4efde-fee2-4758-8663-ad9719d23fe4.json b/change/@fluentui-react-tabster-95b4efde-fee2-4758-8663-ad9719d23fe4.json new file mode 100644 index 00000000000000..3daa4a5464e071 --- /dev/null +++ b/change/@fluentui-react-tabster-95b4efde-fee2-4758-8663-ad9719d23fe4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "upgrate tabster version to 8.6.2", + "packageName": "@fluentui/react-tabster", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-table/library/package.json b/packages/react-components/react-table/library/package.json index 86cb2800c3ddb0..2099a6c59646e9 100644 --- a/packages/react-components/react-table/library/package.json +++ b/packages/react-components/react-table/library/package.json @@ -17,7 +17,8 @@ "@fluentui/react-conformance": "*", "@fluentui/react-conformance-griffel": "*", "@fluentui/scripts-api-extractor": "*", - "@fluentui/scripts-cypress": "*" + "@fluentui/scripts-cypress": "*", + "@fluentui/react-combobox": "*" }, "dependencies": { "@fluentui/keyboard-keys": "^9.0.8", diff --git a/packages/react-components/react-table/library/src/components/Table/Table.combobox.cy.tsx b/packages/react-components/react-table/library/src/components/Table/Table.combobox.cy.tsx new file mode 100644 index 00000000000000..9201fe57fa785d --- /dev/null +++ b/packages/react-components/react-table/library/src/components/Table/Table.combobox.cy.tsx @@ -0,0 +1,205 @@ +import * as React from 'react'; +import { + FolderRegular, + EditRegular, + OpenRegular, + DocumentRegular, + PeopleRegular, + DocumentPdfRegular, + VideoRegular, +} from '@fluentui/react-icons'; +import { + TableBody, + TableCell, + TableRow, + Table, + TableHeader, + TableHeaderCell, + TableCellLayout, +} from '@fluentui/react-table'; +import { useId, type JSXElement } from '@fluentui/react-utilities'; +import { mount as mountBase } from '@fluentui/scripts-cypress'; +import { FluentProvider } from '@fluentui/react-provider'; +import { teamsLightTheme } from '@fluentui/react-theme'; +import { Combobox, ComboboxProps, Option } from '@fluentui/react-combobox'; +import { useArrowNavigationGroup } from '@fluentui/react-tabster'; + +const mount = (element: JSXElement) => { + mountBase({element}); +}; + +const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake']; + +/** + * Simple Combobox example for testing purposes that reproduces the issue described in #35520. + * This component simulates the behavior where: + * 1. User types text that doesn't match any options + * 2. Combobox opens without focusing any option + * 3. Down arrow should focus first option instead of moving to next table cell + */ +export const ComboboxExample = (props: Partial): JSXElement => { + const comboId = useId('combo-default'); + return ( + + {options.map(option => ( + + ))} + + ); +}; + +const items = [ + { + file: { label: 'Meeting notes', icon: }, + author: { label: 'Max Mustermann', status: 'available' }, + lastUpdated: { label: '7h ago', timestamp: 1 }, + lastUpdate: { + label: 'You edited this', + icon: , + }, + }, + { + file: { label: 'Thursday presentation', icon: }, + author: { label: 'Erika Mustermann', status: 'busy' }, + lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 }, + lastUpdate: { + label: 'You recently opened this', + icon: , + }, + }, + { + file: { label: 'Training recording', icon: }, + author: { label: 'John Doe', status: 'away' }, + lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 }, + lastUpdate: { + label: 'You recently opened this', + icon: , + }, + }, + { + file: { label: 'Purchase order', icon: }, + author: { label: 'Jane Doe', status: 'offline' }, + lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 }, + lastUpdate: { + label: 'You shared this in a Teams chat', + icon: , + }, + }, +]; + +const columns = [{ columnKey: 'file', label: 'File' }]; + +export const CellNavigation = (): JSXElement => { + const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' }); + + return ( + + + + {columns.map(column => ( + {column.label} + ))} + + + + + {items.map(item => ( + + + {item.file.label} + + + + + + + + ))} + +
+ ); +}; + +describe('Table with Combobox Integration Test - Issue #35520', () => { + /** + * This test verifies that the issue described in #35520 is fixed. + * The core issue was that when a combobox is open in a table, + * down arrow would move focus to next table cell instead of navigating options. + * The tabster fix ensures combobox gets priority when open. + */ + it('should focus first combobox option on down arrow instead of next table cell', () => { + mount(); + + // Step 1: Focus on the combobox input without clicking + cy.get('input[role="combobox"]').first().focus(); + + // Step 2: Type a letter that does not exist in one of the options + cy.get('input[role="combobox"]').first().type('a'); + + // Step 3: Verify that the combobox input is still focused but the popover is opened + cy.get('input[role="combobox"]').first().should('be.focused'); + cy.get('input[role="combobox"]').first().should('have.attr', 'aria-expanded', 'true'); + cy.get('[role="listbox"]').should('be.visible'); + + // Step 4: Press arrow down and verify that focus goes to one of the options + cy.get('input[role="combobox"]').first().realPress('ArrowDown'); + + // Verify focus remains on the combobox input + cy.get('input[role="combobox"]').first().should('be.focused'); + + // Verify aria-activedescendant points to an option + cy.get('input[role="combobox"]').first().should('have.attr', 'aria-activedescendant').and('not.be.empty'); + }); + + it('should allow navigation between table cells when combobox is closed', () => { + mount(); + + // Focus on the first table cell (file name) + cy.contains('Meeting notes').click(); + + // Press right arrow to move to the combobox cell + cy.focused().realPress('ArrowRight'); + cy.get('input[role="combobox"]').first().should('be.focused'); + + // Make sure combobox is closed by pressing Escape + cy.get('input[role="combobox"]').first().realPress('Escape'); + cy.get('input[role="combobox"]').first().should('have.attr', 'aria-expanded', 'false'); + + // Press left arrow to go back to the file name cell + cy.get('input[role="combobox"]').first().realPress('ArrowLeft'); + + // Should focus the file name cell again + cy.focused().should('contain.text', 'Meeting notes'); + }); + + it('should maintain combobox functionality within table grid navigation', () => { + mount(); + + // Focus on combobox and interact with it + cy.get('input[role="combobox"]').first().realClick(); + cy.get('input[role="combobox"]').first().type('Cat'); + + // Verify combobox opened + cy.get('input[role="combobox"]').first().should('have.attr', 'aria-expanded', 'true'); + + // Clear and try a different approach - just verify basic interaction works + cy.get('input[role="combobox"]').first().clear(); + cy.get('input[role="combobox"]').first().type('Dog'); + + // Verify we can type and the combobox responds + cy.get('input[role="combobox"]').first().should('have.value', 'Dog'); + + // Press Escape to close + cy.get('input[role="combobox"]').first().realPress('Escape'); + + // Verify it closes + cy.get('input[role="combobox"]').first().should('have.attr', 'aria-expanded', 'false'); + }); +}); diff --git a/packages/react-components/react-tabster/package.json b/packages/react-components/react-tabster/package.json index 88d9be64b2469d..1d42a71dd3b450 100644 --- a/packages/react-components/react-tabster/package.json +++ b/packages/react-components/react-tabster/package.json @@ -23,7 +23,7 @@ "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1", "keyborg": "^2.6.0", - "tabster": "^8.5.5" + "tabster": "^8.6.2" }, "peerDependencies": { "@types/react": ">=16.14.0 <20.0.0", diff --git a/yarn.lock b/yarn.lock index 241daacaa118ba..ff9c6f23e3518a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3521,16 +3521,16 @@ resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.1.tgz#e9f09b802f1291839247399028beaef9ce034c81" integrity sha512-h8d28xzYb98fMQKUz0w2fMc1XuGzLLjdyxVIbhbil4ELfk5/orZlSTpF/xdI9C8K0I8lCkq+1En2RJsawZekkg== -"@rollup/rollup-linux-x64-gnu@4.40.0": - version "4.40.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.0.tgz#68b045a720bd9b4d905f462b997590c2190a6de0" - integrity sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ== - "@rollup/rollup-linux-x64-gnu@4.40.1": version "4.40.1" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.1.tgz#0413169dc00470667dea8575c1129d4e7a73eb29" integrity sha512-XiK5z70PEFEFqcNj3/zRSz/qX4bp4QIraTy9QjwJAb/Z8GM7kVUsD0Uk8maIPeTyPCP03ChdI+VVmJriKYbRHQ== +"@rollup/rollup-linux-x64-gnu@4.53.3": + version "4.53.3" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz#fd0dea3bb9aa07e7083579f25e1c2285a46cb9fa" + integrity sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w== + "@rollup/rollup-linux-x64-musl@4.40.1": version "4.40.1" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.1.tgz#c76fd593323c60ea219439a00da6c6d33ffd0ea6" @@ -19465,15 +19465,15 @@ table@^6.0.7: string-width "^4.2.3" strip-ansi "^6.0.1" -tabster@^8.5.5: - version "8.5.5" - resolved "https://registry.yarnpkg.com/tabster/-/tabster-8.5.5.tgz#fcd90edd8c5cd0bd42cd09a025b31afe6946fa15" - integrity sha512-fqoBWIZRPJ2LuAqQWbGGE1KkKz6sX+6ROOeHlXIyRM7qD7XZK0gWc50mJbI8G48wuy8201/kvGkYq3p+QmSTAg== +tabster@^8.6.2: + version "8.6.2" + resolved "https://registry.yarnpkg.com/tabster/-/tabster-8.6.2.tgz#573005911d602090d60eb6ff8515fe7aabeefcde" + integrity sha512-SRt/mFhfunYDWUZcebnKGbWfhN36FSoX7eiGJ7kVfpI9N90WlqOZzoUaDWx+IQA1M/uHujqRqnBGYk6hFtEXhw== dependencies: keyborg "2.6.0" tslib "^2.8.1" optionalDependencies: - "@rollup/rollup-linux-x64-gnu" "4.40.0" + "@rollup/rollup-linux-x64-gnu" "4.53.3" tachometer@0.7.1: version "0.7.1"