[tabs] Change activateOnFocus to false (#3176)

Author: mnajdova

docs/reference/generated/tabs-list.json

@@ -4,7 +4,7 @@
   "props": {
     "activateOnFocus": {
       "type": "boolean",
-      "default": "true",
+      "default": "false",
       "description": "Whether to automatically change the active tab on arrow key focus.\nOtherwise, tabs will be activated using Enter or Spacebar key press.",
       "detailedType": "boolean | undefined"
     },

packages/react/src/tabs/list/TabsList.tsx

@@ -23,7 +23,7 @@ export const TabsList = React.forwardRef(function TabsList(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
-    activateOnFocus = true,
+    activateOnFocus = false,
     className,
     loop = true,
     render,
@@ -202,7 +202,7 @@ export interface TabsListProps extends BaseUIComponentProps<'div', TabsList.Stat
   /**
    * Whether to automatically change the active tab on arrow key focus.
    * Otherwise, tabs will be activated using Enter or Spacebar key press.
-   * @default true
+   * @default false
    */
   activateOnFocus?: boolean;
   /**

packages/react/src/tabs/root/TabsRoot.test.tsx

@@ -174,12 +174,12 @@ describe('<Tabs.Root />', () => {
   });
 
   describe('prop: onValueChange', () => {
-    it('should call onValueChange on pointerdown', async () => {
+    it('when `activateOnFocus = true` should call onValueChange on pointerdown', async () => {
       const handleChange = spy();
       const handlePointerDown = spy();
       const { user } = await render(
         <Tabs.Root value={0} onValueChange={handleChange}>
-          <Tabs.List>
+          <Tabs.List activateOnFocus>
             <Tabs.Tab value={0} />
             <Tabs.Tab value={1} onPointerDown={handlePointerDown} />
           </Tabs.List>
@@ -241,12 +241,12 @@ describe('<Tabs.Root />', () => {
       expect(handleChange.callCount).to.equal(0);
     });
 
-    it('should call onValueChange if an unactive tab gets focused', async () => {
+    it('when `activateOnFocus = true` should call onValueChange if an unactive tab gets focused', async () => {
       const handleChange = spy();
 
       await render(
         <Tabs.Root value={0} onValueChange={handleChange}>
-          <Tabs.List>
+          <Tabs.List activateOnFocus>
             <Tabs.Tab value={0} />
             <Tabs.Tab value={1} />
           </Tabs.List>
@@ -491,7 +491,7 @@ describe('<Tabs.Root />', () => {
                       orientation={orientation as Tabs.Root.Props['orientation']}
                       value={0}
                     >
-                      <Tabs.List onKeyDown={handleKeyDown}>
+                      <Tabs.List onKeyDown={handleKeyDown} activateOnFocus>
                         <Tabs.Tab value={0} />
                         <Tabs.Tab value={1} />
                         <Tabs.Tab value={2} />
@@ -526,7 +526,7 @@ describe('<Tabs.Root />', () => {
                       orientation={orientation as Tabs.Root.Props['orientation']}
                       value={1}
                     >
-                      <Tabs.List onKeyDown={handleKeyDown}>
+                      <Tabs.List onKeyDown={handleKeyDown} activateOnFocus>
                         <Tabs.Tab value={0} />
                         <Tabs.Tab value={1} />
                         <Tabs.Tab value={2} />
@@ -701,7 +701,7 @@ describe('<Tabs.Root />', () => {
                       orientation={orientation as Tabs.Root.Props['orientation']}
                       value={2}
                     >
-                      <Tabs.List onKeyDown={handleKeyDown}>
+                      <Tabs.List onKeyDown={handleKeyDown} activateOnFocus>
                         <Tabs.Tab value={0} />
                         <Tabs.Tab value={1} />
                         <Tabs.Tab value={2} />
@@ -736,7 +736,7 @@ describe('<Tabs.Root />', () => {
                       orientation={orientation as Tabs.Root.Props['orientation']}
                       value={1}
                     >
-                      <Tabs.List onKeyDown={handleKeyDown}>
+                      <Tabs.List onKeyDown={handleKeyDown} activateOnFocus>
                         <Tabs.Tab value={0} />
                         <Tabs.Tab value={1} />
                         <Tabs.Tab value={2} />
@@ -878,7 +878,7 @@ describe('<Tabs.Root />', () => {
 
           await render(
             <Tabs.Root onValueChange={handleChange} value={2}>
-              <Tabs.List onKeyDown={handleKeyDown}>
+              <Tabs.List onKeyDown={handleKeyDown} activateOnFocus>
                 <Tabs.Tab value={0} />
                 <Tabs.Tab value={1} />
                 <Tabs.Tab value={2} />
@@ -967,7 +967,7 @@ describe('<Tabs.Root />', () => {
 
           await render(
             <Tabs.Root onValueChange={handleChange} value={0}>
-              <Tabs.List onKeyDown={handleKeyDown}>
+              <Tabs.List onKeyDown={handleKeyDown} activateOnFocus>
                 <Tabs.Tab value={0} />
                 <Tabs.Tab value={1} />
                 <Tabs.Tab value={2} />

packages/react/src/tabs/tab/TabsTab.tsx

@@ -140,8 +140,9 @@ export const TabsTab = React.forwardRef(function TabsTab(
     }
 
     if (
-      (activateOnFocus && !isPressingRef.current) || // keyboard or touch focus
-      (isPressingRef.current && isMainButtonRef.current) // mouse focus
+      activateOnFocus &&
+      (!isPressingRef.current || // keyboard or touch focus
+        (isPressingRef.current && isMainButtonRef.current)) // mouse focus
     ) {
       onTabActivation(
         tabValue,