@eeacms/volto-tabs-block 4.0.1 → 5.0.1

package/CHANGELOG.md

@@ -4,6 +4,46 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [5.0.1](https://github.com/eea/volto-tabs-block/compare/5.0.0...5.0.1) - 15 May 2023
+
+#### :bug: Bug Fixes
+
+- fix: show properties for block inside tabs block [Mimi - [`5b4dd3d`](https://github.com/eea/volto-tabs-block/commit/5b4dd3d5f3a045126ead6c33cc8e2e470d691c6d)]
+
+## [5.0.0](https://github.com/eea/volto-tabs-block/compare/4.0.1...5.0.0) - 24 April 2023
+
+#### :rocket: New Features
+
+- feat(SEO): Render content of all tabs initially for SEO optimization and use CSS to hide non-active ones - refs #250207 [dobri1408 - [`f3499f2`](https://github.com/eea/volto-tabs-block/commit/f3499f2f956bf144ae274f7e4277ae3842e3d206)]
+
+#### :bug: Bug Fixes
+
+- fix(tabs): scrollToElement on mount of View templates [nileshgulia1 - [`be6a6fb`](https://github.com/eea/volto-tabs-block/commit/be6a6fbba8fde9d5859f1a2408442c9814a72399)]
+
+#### :nail_care: Enhancements
+
+- refactor(code): Cleanup code as per sonarqube issues [Teodor Voicu - [`5b73ca6`](https://github.com/eea/volto-tabs-block/commit/5b73ca6b504a1b295f992f9536bda6d7a3448d29)]
+- refactor(helpers): make getParentTabFromHash bulletproof refs#153601 [nileshgulia1 - [`890ac8c`](https://github.com/eea/volto-tabs-block/commit/890ac8c0ed4ad2bc38d46283bc945a5b58febbbf)]
+
+#### :house: Internal changes
+
+- chore(package.json): update package version from 4.0.1 to 5.0.0 [Miu Razvan - [`e0fee6f`](https://github.com/eea/volto-tabs-block/commit/e0fee6f42ed5111db62af156b61fdc5a519e8dc7)]
+- chore: fix eslint refs #153601 [nileshgulia1 - [`79589b7`](https://github.com/eea/volto-tabs-block/commit/79589b792c9a7feabf4a942617398d1ae83277ae)]
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #35 from eea/fix-tab-anchors-scroll [Nilesh - [`532f05b`](https://github.com/eea/volto-tabs-block/commit/532f05b76dbbc0e6db7bafd270aad83e9e35a5d5)]
+- clean up code [Miu Razvan - [`0228e2d`](https://github.com/eea/volto-tabs-block/commit/0228e2ddf700fe55db902b9c8b2cf0556b316ec5)]
+- prettier fix [Miu Razvan - [`cb7564c`](https://github.com/eea/volto-tabs-block/commit/cb7564c4379adccf3a0a3880bcdb91fe54db8908)]
+- fix onSelectBlock callback [Miu Razvan - [`5af17e6`](https://github.com/eea/volto-tabs-block/commit/5af17e6c734a5717b99685077a0825aa68e6867f)]
+- revert breaking changes [Miu Razvan - [`ff1fc59`](https://github.com/eea/volto-tabs-block/commit/ff1fc596aee480c79fd42d0bb97570041f215ac8)]
+- bump major version [nileshgulia1 - [`4fbae52`](https://github.com/eea/volto-tabs-block/commit/4fbae52ec06b3830c29b41385095a5b383b01e4b)]
+- move slug check to volto-anchors [nileshgulia1 - [`1e33c22`](https://github.com/eea/volto-tabs-block/commit/1e33c229fac8e9d7ab65941fc7124a213d59e603)]
+- fix scrolling onTabChange [nileshgulia1 - [`7051676`](https://github.com/eea/volto-tabs-block/commit/7051676673d395f142790ac92438c20f3d0b2006)]
+- fix scroll to target [nileshgulia1 - [`02edb7b`](https://github.com/eea/volto-tabs-block/commit/02edb7b8699e9a39f8f8d302fd13e68910d685c4)]
+- scrollToTarget method [nileshgulia1 - [`d6732e1`](https://github.com/eea/volto-tabs-block/commit/d6732e1d2d682010623d1efe38502642b8faa7de)]
+- re add hocs, not a breaking change [nileshgulia1 - [`a1bb60b`](https://github.com/eea/volto-tabs-block/commit/a1bb60b2231d8dd335dc9cb8c3ec9b4f2580639b)]
+- scroll to anchors computed from hash [nileshgulia1 - [`9a3da29`](https://github.com/eea/volto-tabs-block/commit/9a3da294ce0a35d1be2f06d2c4df39e51d49d895)]
 ### [4.0.1](https://github.com/eea/volto-tabs-block/compare/4.0.0...4.0.1) - 4 April 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "4.0.1",
+  "version": "5.0.1",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,10 +17,12 @@
     "url": "git@github.com:eea/volto-tabs-block.git"
   },
   "addons": [
-    "@eeacms/volto-block-style"
+    "@eeacms/volto-block-style",
+    "@eeacms/volto-anchors"
   ],
   "dependencies": {
     "@eeacms/volto-block-style": "*",
+    "@eeacms/volto-anchors": "*",
     "react-responsive-tabs": "4.4.3",
     "react-slick": "^0.24.0",
     "slick-carousel": "^1.8.1"

package/src/components/Edit.jsx

@@ -111,7 +111,7 @@ const Edit = (props) => {
     }
   };
 
-  const onSelectBlock = (id, tabId, isMultipleSelection, event) => {
+  const onSelectBlock = (id, isMultipleSelection, event) => {
     let newMultiSelected = [];
     let selected = id;
 
@@ -220,23 +220,19 @@ const Edit = (props) => {
         ) : (
           ''
         )}
-        {!data?.readOnlySettings ? (
+        {!data?.readOnlySettings && !activeBlock ? (
           <SidebarPortal selected={props.selected}>
-            {activeBlock ? (
-              ''
-            ) : (
-              <InlineForm
-                schema={schemaObject}
-                title={schemaObject.title}
-                onChangeField={(id, value) => {
-                  onChangeBlock(block, {
-                    ...data,
-                    [id]: value,
-                  });
-                }}
-                formData={data}
-              />
-            )}
+            <InlineForm
+              schema={schemaObject}
+              title={schemaObject.title}
+              onChangeField={(id, value) => {
+                onChangeBlock(block, {
+                  ...data,
+                  [id]: value,
+                });
+              }}
+              formData={data}
+            />
           </SidebarPortal>
         ) : (
           ''

package/src/components/EditBlockWrapper.jsx

@@ -51,10 +51,6 @@ class EditBlockWrapper extends React.Component {
       return;
     }
 
-    // if (this.props.handleClickOutside) {
-    //   this.props.handleClickOutside();
-    // }
-
     if (this.state.addNewBlockOpened) {
       this.setState({
         addNewBlockOpened: false,

package/src/components/View.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import { DefaultView } from './templates/default';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import config from '@plone/volto/registry';
 
@@ -27,6 +31,30 @@ const View = (props) => {
     config.blocks.blocksConfig[TABS_BLOCK].templates?.[template]?.view ||
     DefaultView;
 
+  React.useEffect(() => {
+    const urlHash = props.location.hash.substring(1) || '';
+    const parentTabId = getParentTabFromHash(data, urlHash);
+    const id = parentTabId;
+    const index = tabsList.indexOf(id);
+    const parentId = data.id || props.id;
+    const parent = document.getElementById(parentId);
+    const headerWrapper = document.querySelector('.header-wrapper');
+    const offsetHeight = headerWrapper?.offsetHeight || 0;
+    if (id !== parentId && index > -1 && parent) {
+      if (activeTabIndex !== index) {
+        setActiveTab(id);
+      }
+      setTimeout(() => {
+        const scrollToElement = document.getElementById(urlHash);
+        //TODO: volto now uses react-router-hash-link which automatically scrolls to offset 0
+        props.scrollToTarget(scrollToElement, offsetHeight);
+      }, 10);
+    } else if (id === parentId && parent) {
+      props.scrollToTarget(parent, offsetHeight);
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
   return (
     <StyleWrapperView
       {...props}
@@ -67,4 +95,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default compose(withScrollToTarget)(withRouter(View));

package/src/components/templates/accordion/View.jsx

@@ -9,6 +9,8 @@ import config from '@plone/volto/registry';
 import { Icon as VoltoIcon, RenderBlocks } from '@plone/volto/components';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
+import noop from 'lodash/noop';
 
 import 'react-responsive-tabs/styles.css';
 import '@eeacms/volto-tabs-block/less/menu.less';
@@ -49,7 +51,7 @@ const View = (props) => {
     tabsList = [],
     tabs = {},
     activeTabIndex = 0,
-    setActiveTab = () => {},
+    setActiveTab = noop,
     id,
   } = props;
 
@@ -59,6 +61,7 @@ const View = (props) => {
 
   const tabsContainer = React.useRef();
   const [mounted, setMounted] = React.useState(false);
+  const [hashTab, setHashTab] = React.useState(false);
   const [initialWidth, setInitialWidth] = React.useState(transformWidth);
 
   const schema = React.useMemo(
@@ -101,7 +104,7 @@ const View = (props) => {
           {title || defaultTitle}{' '}
         </>
       ),
-      getContent: () => (
+      content: (
         <Tab {...props} tab={tab} content={tabs[tab]} aria-hidden={false} />
       ),
       key: tab,
@@ -155,11 +158,19 @@ const View = (props) => {
         ref={tabsContainer}
         transformWidth={initialWidth}
         selectedTabKey={tabsList[activeTabIndex]}
+        unmountOnExit={false}
         items={items}
         onChange={(tab) => {
-          if (tab !== tabsList[activeTabIndex]) {
+          const { blockWidth } = tabsContainer.current?.state || {};
+          const tabWithHash = getParentTabFromHash(
+            data,
+            props.location.hash.substring(1),
+          );
+          if (tabWithHash === tabsList[activeTabIndex] && !hashTab)
+            setHashTab(true);
+          else if (tab !== tabsList[activeTabIndex]) {
             setActiveTab(tab);
-          } else {
+          } else if (blockWidth <= initialWidth) {
             setActiveTab(null);
           }
         }}

package/src/components/templates/carousel/HorizontalView.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, RenderBlocks } from '@plone/volto/components';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-arrow.svg';
 import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-arrow.svg';
@@ -14,6 +11,8 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
 
+import noop from 'lodash/noop';
+
 const Slider = loadable(() => import('react-slick'));
 
 const Dots = (props) => {
@@ -95,18 +94,15 @@ const ArrowsGroup = (props) => {
 
 const View = (props) => {
   const slider = React.useRef(null);
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
   const blockId = props.id;
   const {
     activeTab = null,
     data = {},
-    hashlink = {},
     metadata = {},
     tabsList = [],
     tabs = {},
-    setActiveTab = () => {},
+    setActiveTab = noop,
   } = props;
-  const activeTabIndex = tabsList.indexOf(activeTab);
   const uiContainer = data.align === 'full' ? 'ui container' : false;
 
   const settings = {
@@ -151,40 +147,6 @@ const View = (props) => {
         carouselDiv.setAttribute('tabindex', '0');
   }, []);
 
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      // TODO: Find the best way to add offset relative to header
-      //       The header can be static on mobile and relative on > mobile
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (
-        id !== parentId &&
-        parentId === hashlink.data.parentId &&
-        index > -1 &&
-        parent
-      ) {
-        if (activeTabIndex !== index) {
-          slider.current.slickGoTo(index);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    /* eslint-disable-next-line */
-  }, [hashlink.counter]);
-
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -227,11 +189,4 @@ const View = (props) => {
   );
 };
 
-export default compose(
-  connect((state) => {
-    return {
-      hashlink: state.hashlink,
-    };
-  }),
-  withScrollToTarget,
-)(withRouter(View));
+export default withRouter(View);

package/src/components/templates/carousel/VerticalView.jsx

@@ -1,12 +1,8 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { RenderBlocks } from '@plone/volto/components';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
@@ -15,14 +11,7 @@ const Slider = loadable(() => import('react-slick'));
 
 const View = (props) => {
   const slider = React.useRef(null);
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    tabs = {},
-    hashlink = {},
-  } = props;
+  const { metadata = {}, data = {}, tabsList = [], tabs = {} } = props;
   const theme = data.theme || 'light';
   const uiContainer = data.align === 'full' ? 'ui container' : false;
 
@@ -38,34 +27,6 @@ const View = (props) => {
     verticalSwiping: true,
   };
 
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const currentIndex = slider.current?.innerSlider?.state?.currentSlide;
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (currentIndex !== index) {
-          slider.current.slickGoTo(index);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    /* eslint-disable-next-line */
-  }, [hashlink.counter]);
-
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -89,11 +50,4 @@ const View = (props) => {
   );
 };
 
-export default compose(
-  connect((state) => {
-    return {
-      hashlink: state.hashlink,
-    };
-  }),
-  withScrollToTarget,
-)(withRouter(View));
+export default withRouter(View);

package/src/components/templates/default/Edit.jsx

@@ -15,6 +15,8 @@ import {
 
 import '@eeacms/volto-tabs-block/less/menu.less';
 
+import noop from 'lodash/noop';
+
 const MenuItem = (props) => {
   const inputRef = React.useRef(null);
   const {
@@ -30,11 +32,11 @@ const MenuItem = (props) => {
     tabsDescription,
     tabsList = [],
     tabsTitle,
-    emptyTab = () => {},
-    setActiveBlock = () => {},
-    setActiveTab = () => {},
-    setEditingTab = () => {},
-    onChangeBlock = () => {},
+    emptyTab = noop,
+    setActiveBlock = noop,
+    setActiveTab = noop,
+    setEditingTab = noop,
+    onChangeBlock = noop,
   } = props;
   const { tab, index } = props;
   const title = tabs[tab].title;
@@ -157,11 +159,11 @@ const Edit = (props) => {
     tabs = {},
     tabsData = {},
     tabsList = [],
-    emptyTab = () => {},
-    onChangeBlock = () => {},
-    onChangeTabData = () => {},
-    onSelectBlock = () => {},
-    setEditingTab = () => {},
+    emptyTab = noop,
+    onChangeBlock = noop,
+    onChangeTabData = noop,
+    onSelectBlock = noop,
+    setEditingTab = noop,
   } = props;
   const menuPosition = getMenuPosition(data);
   const isContainer = data.align === 'full';
@@ -242,7 +244,6 @@ const Edit = (props) => {
                   : false;
                 onSelectBlock(
                   id,
-                  activeTab,
                   activeBlock === id ? false : isMultipleSelection,
                   e,
                 );

package/src/components/templates/default/View.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { useState, useEffect } from 'react';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import cx from 'classnames';
@@ -15,11 +14,13 @@ import {
 
 import '@eeacms/volto-tabs-block/less/menu.less';
 
+import noop from 'lodash/noop';
+
 const MenuItem = (props) => {
   const {
     activeTab = null,
     tabs = {},
-    setActiveTab = () => {},
+    setActiveTab = noop,
     tabsTitle,
     tabsDescription,
     blockId,
@@ -28,8 +29,22 @@ const MenuItem = (props) => {
   const { tab, index } = props;
   const title = tabs[tab].title;
   const tabIndex = index + 1;
+
+  const [tabChanged, setTabChanged] = useState(false);
   const defaultTitle = `Tab ${tabIndex}`;
 
+  useEffect(() => {
+    if (
+      tabChanged === true &&
+      document?.getElementById(blockId)?.querySelector('#tab-pane-' + tab)
+    ) {
+      document
+        .getElementById(blockId)
+        .querySelector('#tab-pane-' + tab)
+        .focus();
+      setTabChanged(false);
+    }
+  }, [tabChanged, tab, blockId]);
   return (
     <React.Fragment>
       {index === 0 && (tabsTitle || tabsDescription) && (
@@ -50,19 +65,10 @@ const MenuItem = (props) => {
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
             e.preventDefault();
-            if (
-              document
-                .getElementById(blockId)
-                ?.getElementsByClassName('active tab').length > 0
-            ) {
-              const tabDiv = document
-                .getElementById(blockId)
-                .getElementsByClassName('active tab')[0];
-              tabDiv.focus();
-            }
             if (activeTab !== tab) {
               setActiveTab(tab);
             }
+            setTabChanged(true);
           }
         }}
       >
@@ -74,15 +80,12 @@ const MenuItem = (props) => {
 };
 
 const View = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
   const {
     metadata = {},
     data = {},
     tabsList = [],
     tabs = {},
     activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
   } = props;
   const [menuPosition, setMenuPosition] = React.useState({});
 
@@ -115,33 +118,6 @@ const View = (props) => {
     [schema, data],
   );
 
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    /* eslint-disable-next-line */
-  }, [hashlink.counter]);
-
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -156,13 +132,13 @@ const View = (props) => {
           blockId={props?.id || ''}
         />
       ),
-      render: () => {
-        return (
-          <Tab.Pane as={isContainer ? Container : undefined} tabIndex={0}>
+      pane: (
+        <Tab.Pane as={isContainer ? Container : undefined}>
+          <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
             <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
-          </Tab.Pane>
-        );
-      },
+          </div>
+        </Tab.Pane>
+      ),
     };
   });
 
@@ -171,6 +147,7 @@ const View = (props) => {
       <Tab
         activeIndex={activeTabIndex}
         className="default tabs tabs-accessibility"
+        renderActiveOnly={false}
         menu={{
           attached: menuPosition.attached,
           borderless: getDataValue('menuBorderless'),
@@ -202,11 +179,4 @@ const View = (props) => {
   );
 };
 
-export default compose(
-  connect((state) => {
-    return {
-      hashlink: state.hashlink,
-    };
-  }),
-  withScrollToTarget,
-)(withRouter(View));
+export default compose(withScrollToTarget)(withRouter(View));

package/src/components/templates/horizontal-responsive/View.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
@@ -7,7 +7,6 @@ import { Menu, Tab, Container, Dropdown, Button } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import { RenderBlocks } from '@plone/volto/components';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import {
   SimpleMarkdown,
   getMenuPosition,
@@ -17,18 +16,27 @@ import {
 
 import '@eeacms/volto-tabs-block/less/menu.less';
 
+import noop from 'lodash/noop';
+
 const MenuItem = (props) => {
-  const {
-    activeTab = null,
-    tabs = {},
-    setActiveTab = () => {},
-    blockId,
-  } = props;
+  const { activeTab = null, tabs = {}, setActiveTab = noop, blockId } = props;
   const { tabsTitle, tabsDescription, tab, index } = props;
   const title = tabs[tab].title;
   const tabIndex = index + 1;
   const defaultTitle = `Tab ${tabIndex}`;
-
+  const [tabChanged, setTabChanged] = useState(false);
+  useEffect(() => {
+    if (
+      tabChanged === true &&
+      document?.getElementById(blockId)?.querySelector('#tab-pane-' + tab)
+    ) {
+      document
+        .getElementById(blockId)
+        .querySelector('#tab-pane-' + tab)
+        .focus();
+      setTabChanged(false);
+    }
+  }, [tabChanged, tab, blockId]);
   return (
     <React.Fragment>
       {index === 0 && (tabsTitle || tabsDescription) && (
@@ -73,19 +81,10 @@ const MenuItem = (props) => {
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
             e.preventDefault();
-            if (
-              document
-                .getElementById(blockId)
-                ?.getElementsByClassName('active tab').length > 0
-            ) {
-              const tabDiv = document
-                .getElementById(blockId)
-                .getElementsByClassName('active tab')[0];
-              tabDiv.focus();
-            }
             if (activeTab !== tab) {
               setActiveTab(tab);
             }
+            setTabChanged(true);
           }
         }}
       >
@@ -105,12 +104,12 @@ const MenuWrapper = (props) => {
     screen = {},
     tabs = {},
     tabsList = [],
-    setActiveTab = () => {},
+    setActiveTab = noop,
   } = props;
   const [open, setOpen] = React.useState(false);
 
   React.useEffect(() => {
-    if (!true || !node?.current) return;
+    if (false || !node?.current) return;
     const items = node.current.querySelectorAll(
       '.ui.menu > .menu-wrapper > .item:not(.menu-title)',
     );
@@ -182,16 +181,13 @@ const MenuWrapper = (props) => {
 };
 
 const View = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
   const {
     metadata = {},
     data = {},
     tabsList = [],
     tabs = {},
     activeTabIndex = 0,
-    hashlink = {},
     screen,
-    setActiveTab = () => {},
   } = props;
   const menuPosition = getMenuPosition(data);
   const isContainer = data.align === 'full';
@@ -217,33 +213,6 @@ const View = (props) => {
     [schema, data],
   );
 
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    /* eslint-disable-next-line */
-  }, [hashlink.counter]);
-
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -260,19 +229,13 @@ const View = (props) => {
           tabsDescription={tabsDescription}
         />
       ),
-      render: () => {
-        return (
-          <>
-            <Tab.Pane as={isContainer ? Container : undefined} tabIndex={0}>
-              <RenderBlocks
-                {...props}
-                metadata={metadata}
-                content={tabs[tab]}
-              />
-            </Tab.Pane>
-          </>
-        );
-      },
+      pane: (
+        <Tab.Pane as={isContainer ? Container : undefined}>
+          <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
+            <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
+          </div>
+        </Tab.Pane>
+      ),
     };
   });
 
@@ -281,6 +244,7 @@ const View = (props) => {
       <Tab
         activeIndex={activeTabIndex}
         className="horizontal-responsive tabs"
+        renderActiveOnly={false}
         menu={{
           attached: menuPosition.attached,
           borderless: getDataValue('menuBorderless'),
@@ -316,9 +280,7 @@ const View = (props) => {
 export default compose(
   connect((state) => {
     return {
-      hashlink: state.hashlink,
       screen: state.screen,
     };
   }),
-  withScrollToTarget,
 )(withRouter(View));

package/src/helpers.js

@@ -1,5 +1,6 @@
 import { v4 as uuid } from 'uuid';
 import { emptyBlocksForm } from '@plone/volto/helpers';
+import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
 
 export const empty = () => {
   const tabId = uuid();
@@ -34,3 +35,20 @@ export const scrollToTarget = (target, offsetHeight = 0) => {
 
   return;
 };
+
+export const getParentTabFromHash = (tabsBlockData, urlHash) => {
+  if (urlHash) {
+    const { data } = tabsBlockData;
+    let parentBlockId;
+    let isSlugPresent;
+    visitBlocks(data, ([id, data]) => {
+      if (data['@type'] === 'tab') parentBlockId = id;
+      if (toSlug(data.plaintext) === urlHash) {
+        isSlugPresent = true;
+        return true;
+      }
+    });
+    return isSlugPresent ? parentBlockId : null;
+  }
+  return null;
+};

package/src/index.js

@@ -1,4 +1,3 @@
-import { TabsEdit, TabsView } from '@eeacms/volto-tabs-block/components';
 import {
   DefaultEdit,
   DefaultView,
@@ -11,8 +10,10 @@ import {
   accordionSchema,
   horizontalResponsiveSchema,
   carouselSchema,
+  layoutSchema,
+  TabsEdit,
+  TabsView,
 } from '@eeacms/volto-tabs-block/components';
-import { layoutSchema } from '@eeacms/volto-tabs-block/components';
 import { TABS_BLOCK } from './constants';
 import { TabsWidget } from './widgets';
 
@@ -94,10 +95,5 @@ export default (config) => {
 
   config.widgets.type.tabs = TabsWidget;
 
-  config.settings.hashlinkBlacklist = [
-    ...(config.settings.hashlinkBlacklist || []),
-    TABS_BLOCK,
-  ];
-
   return config;
 };

package/src/less/tabs.less

@@ -49,8 +49,8 @@
     padding-bottom: @verticalPadding;
   }
 
-  > .styled > .default.tabs,
-  > .default.tabs {
+  > .styled > .default.tabs.active,
+  > .default.tabs.active {
     display: flex;
     flex-direction: column;
 

package/src/widgets/TabsWidget.jsx

@@ -2,11 +2,9 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import { omit, without } from 'lodash';
 import move from 'lodash-move';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
-import { DragDropList } from '@plone/volto/components';
+import { Icon, FormFieldWrapper, DragDropList } from '@plone/volto/components';
 import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
 import { StyleWrapperEdit } from '@eeacms/volto-block-style/StyleWrapper';
-
 import dragSVG from '@plone/volto/icons/drag.svg';
 import themeSVG from '@plone/volto/icons/theme.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
@@ -30,9 +28,9 @@ const TabsWidget = (props) => {
   const [activeTabId, setActiveTabId] = React.useState(0);
   const { value = {}, id, onChange } = props;
   const { blocks = {} } = value;
-  const tabsList = (value.blocks_layout?.items || []).map((id) => [
-    id,
-    blocks[id],
+  const tabsList = (value.blocks_layout?.items || []).map((uid) => [
+    uid,
+    blocks[uid],
   ]);
   const activeTabData = blocks[activeTabId] || {};