fix(demos): fix AttributeValueFiltering menu selection

[fallmo]

Problem

• Pressing Enter or clicking on an attribute in the AttributeValueFiltering demo sometimes failed to open the value list, or caused a TypeError due to undefined menuItemsText.
• Menu did not always update when selecting a key, and keyboard/mouse events could result in no-ops or errors.

Changes

• Guarded selectKey to prevent setting menuItemsText to undefined.
• Updated useEffect dependencies to ensure menu updates on key/value selection.
• Improved handleEnter and onSelect to handle missing/invalid selections and reliably extract the selected text.
• Fixed event handling for keyboard and mouse interactions, including proper use of event.preventDefault and event.currentTarget.
• implement optional chaining to avoid potential undefined errors
• Overall typescript improvements

Closes #12206

Summary by CodeRabbit

• Bug Fixes
  • Improved stability of the text input field with attribute value filtering through enhanced null-safety checks.
  • Refined keyboard event handling for menu interactions and value selection.
  • Fixed potential runtime errors in edge cases where UI elements may be unavailable.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The PR fixes TypeErrors in the AttributeValueFiltering demo by adding null and undefined safety checks throughout event handlers and DOM interactions. Changes include initializing refs to null, adding guards in event handlers, and using optional chaining to prevent runtime errors when elements or event targets are absent.

Changes

Cohort / File(s)	Summary
Null Safety & Event Handler Robustness packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx	Replaced useRef initializations from undefined to null; added null/undefined guards in selectKey, handleEnter, onSelect, and handleClick; updated focus/propagation calls with optional chaining to handle absent elements; broadened event parameters to possibly undefined and use optional chaining for safe property access on event targets

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• thatblindgeye
• nicolethoen

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing menu selection issues in the AttributeValueFiltering demo component.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #12206: preventing TypeErrors by guarding menuItemsText, ensuring reliable attribute selection, and improving event handling with optional chaining throughout.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the AttributeValueFiltering component and are necessary to resolve the TypeError and event handling issues described in issue #12206.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx (1)

193-203: LGTM! Robust event handling.

The optional chaining and defensive text extraction prevent errors when the event or target is missing. The fallback to empty string and optional chaining on lines 201-202 make the function resilient.

Optional: Guard against empty text selection

For extra safety, you could bail out early if no text was extracted:

 const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, _itemId: string | number) => {
   const selectedText = (event?.target as HTMLElement | undefined)?.innerText.trim() || '';
+  
+  if (!selectedText) {
+    return;
+  }

   if (selectedKey.length) {
     selectValue(selectedText);
   } else {
     selectKey(selectedText);
   }
   event?.stopPropagation();
   textInputGroupRef.current?.querySelector('input')?.focus();
 };

This prevents adding malformed chips if somehow an empty element is selected, though normal usage shouldn't trigger this.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 097dae1 and e2b73b9.

📒 Files selected for processing (1)

• packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build
• GitHub Check: Build, test & deploy

🔇 Additional comments (6)

packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx (6)

43-44: LGTM! Correct ref initialization.

Initializing refs with null instead of undefined is the standard React pattern and improves type safety.

---

110-110: LGTM! Correct dependency array.

Adding menuItemsText and selectedKey to the dependency array is correct, as the effect uses both values. This ensures the menu updates properly when an attribute or value is selected.

---

131-145: LGTM! Improved Enter key handling.

Extracting firstResult from menuItems[2] (the first menu item after heading and divider) and guarding against its absence makes the function more robust. This prevents errors when Enter is pressed with an empty menu.

---

155-155: LGTM! Correct event handling for colon key.

Passing the event to handleColon allows it to properly call preventDefault() when auto-selecting a key, preventing the colon from being added to the input.

Also applies to: 183-183

---

206-214: LGTM! Defensive click handling.

Making the event parameter possibly undefined and using optional chaining throughout makes the function robust against missing events or targets.

---

119-129: LGTM! Core fix for the TypeError.

The guard on lines 122-124 prevents calling setMenuItemsText with undefined. At line 72, menuItemsText.filter() would throw a TypeError if menuItemsText was undefined. This guard prevents that by returning early when an invalid key is passed to selectKey, preserving the previous valid state.

[patternfly-build]

Preview: https://pf-react-pr-12207.surge.sh

A11y report: https://pf-react-pr-12207-a11y.surge.sh