[terra-menu] Update MenuItemGroup to retain state when isToggled prop is used

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated `terra-menu` test for selectable menu to retain selection state when using `isToggled` prop after closing and re-sopening the menu.
+
 ## 1.67.0 - (February 22, 2024)
 
 * Changed

packages/terra-framework-docs/src/terra-dev-site/test/menu/menu/SelectableMenu.test.jsx

@@ -7,16 +7,21 @@ class SelectableMenu extends React.Component {
   constructor(props) {
     super(props);
     this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.handleOnChange = this.handleOnChange.bind(this);
     this.handleRequestClose = this.handleRequestClose.bind(this);
     this.setButtonNode = this.setButtonNode.bind(this);
     this.getButtonNode = this.getButtonNode.bind(this);
-    this.state = { open: false };
+    this.state = { open: false, selectedGroupIndex: undefined };
   }
 
   handleButtonClick() {
     this.setState({ open: true });
   }
 
+  handleOnChange(event, index) {
+    this.setState({ selectedGroupIndex: index });
+  }
+
   handleRequestClose() {
     this.setState({ open: false });
   }
@@ -40,10 +45,10 @@ class SelectableMenu extends React.Component {
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
         >
-          <Menu.ItemGroup className="TestGroup" onChange={this.handleSelection} key="selectable-group">
-            <Menu.Item text="Group Item 1" key="1" className="TestGroupItem1" />
-            <Menu.Item text="Group Item 2" key="2" className="TestGroupItem2" />
-            <Menu.Item text="Group Item 3" key="3" className="TestGroupItem3" />
+          <Menu.ItemGroup className="TestGroup" onChange={this.handleOnChange} key="selectable-group">
+            <Menu.Item text="Group Item 1" key="1" className="TestGroupItem1" isToggled={this.state.selectedGroupIndex === 0} />
+            <Menu.Item text="Group Item 2" key="2" className="TestGroupItem2" isToggled={this.state.selectedGroupIndex === 1} />
+            <Menu.Item text="Group Item 3" key="3" className="TestGroupItem3" isToggled={this.state.selectedGroupIndex === 2} />
           </Menu.ItemGroup>
         </Menu>
         <Button id="selectable-menu-button" type="button" onClick={this.handleButtonClick} text="Default Menu" aria-haspopup icon={<IconCaretDown />} isReversed refCallback={this.setButtonNode} />

packages/terra-menu/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed `MenuItemGroup` to retain selection state when menu is closed and re-opened and `isToggled` prop is used.
+
 ## 6.84.1 - (February 7, 2024)
 
 * Fixed

packages/terra-menu/src/MenuItemGroup.jsx

@@ -20,7 +20,7 @@ const childContextTypes = {
 const initialSingleToggledIndex = (children) => {
   const childArray = React.Children.toArray(children);
   for (let i = 0; i < childArray.length; i += 1) {
-    if (childArray[i].props.isSelected) {
+    if (childArray[i].props.isSelected || childArray[i].props.isToggled) {
       return i;
     }
   }

packages/terra-menu/tests/wdio/menu-spec.js

@@ -65,6 +65,16 @@ Terra.describeViewports('Menu', ['medium'], () => {
     Terra.validates.element('selectable', { selector: '#root', rules: ignoredA11y });
   });
 
+  it('retains selected item on closing and re-opening Menu-Selectable ', () => {
+    browser.url('/raw/tests/cerner-terra-framework-docs/menu/menu/selectable-menu');
+    $('#selectable-menu-button').click();
+    $('.TestGroupItem2').click();
+    browser.keys('Escape');
+    $('#selectable-menu-button').click();
+
+    Terra.validates.element('selected item', { selector: '#root', rules: ignoredA11y });
+  });
+
   it('displays a Menu with a submenu', () => {
     browser.url('/raw/tests/cerner-terra-framework-docs/menu/menu/sub-menu');
     $('#sub-menu-button').click();