@instructure/ui-drilldown 10.26.0 → 10.26.1-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.26.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1-snapshot-1) (2025-10-06)
+
+
+### Bug Fixes
+
+* **ui-drilldown:** fix for prevent option selection when Drilldown or its sub-components get disabled prop ([5fc37f6](https://github.com/instructure/instructure-ui/commit/5fc37f6b7c7622ab248a4d1bd575b2bbac97e0a0))
+
+
+
+
+
 # [10.26.0](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.26.0) (2025-10-01)
 
 

package/es/Drilldown/index.js

@@ -228,11 +228,18 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this.handleOptionSelect = (event, {
       id
     }) => {
+      var _this$currentPage, _selectedOption$group;
       const selectedOption = this.getPageChildById(id);
 
       // TODO: this line can be removed when React 16 is no longer supported
       event.persist();
-      if (!id || !selectedOption || selectedOption.props.disabled || event.target.getAttribute('disabled') || event.target.getAttribute('aria-disabled')) {
+      if (!id || !selectedOption) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const isOptionDisabled = id !== this._headerBackId && (this.props.disabled || ((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.disabled) || ((_selectedOption$group = selectedOption.groupProps) === null || _selectedOption$group === void 0 ? void 0 : _selectedOption$group.disabled) || selectedOption.props.disabled);
+      if (isOptionDisabled) {
         event.preventDefault();
         event.stopPropagation();
         return;
@@ -357,8 +364,8 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       }
     };
     this.getFirstOption = () => {
-      var _this$currentPage;
-      const children = Children.toArray((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.children);
+      var _this$currentPage2;
+      const children = Children.toArray((_this$currentPage2 = this.currentPage) === null || _this$currentPage2 === void 0 ? void 0 : _this$currentPage2.children);
       const child = children[0];
       if (!child) return void 0;
 
@@ -481,14 +488,14 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
   }
   get currentPageAriaLabel() {
-    var _this$currentPage2;
+    var _this$currentPage3;
     // return, if explicitly set
     if (this.props['aria-labelledby']) {
       return this.props['aria-labelledby'];
     }
 
     // if it has title, point to the title label content
-    if ((_this$currentPage2 = this.currentPage) !== null && _this$currentPage2 !== void 0 && _this$currentPage2.renderTitle) {
+    if ((_this$currentPage3 = this.currentPage) !== null && _this$currentPage3 !== void 0 && _this$currentPage3.renderTitle) {
       return this._headerTitleLabelId;
     }
 
@@ -802,7 +809,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     });
   }
   renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
-    var _this$currentPage3, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
+    var _this$currentPage4, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
     const styles = this.props.styles;
     let isSelected = false;
     const _option$props = option.props,
@@ -862,7 +869,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
     const isOptionDisabled = id !== this._headerBackId && (
     // Back nav is never disabled
-    this.props.disabled || ((_this$currentPage3 = this.currentPage) === null || _this$currentPage3 === void 0 ? void 0 : _this$currentPage3.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
+    this.props.disabled || ((_this$currentPage4 = this.currentPage) === null || _this$currentPage4 === void 0 ? void 0 : _this$currentPage4.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
 
     // display option as disabled
     if (isOptionDisabled) {

package/lib/Drilldown/index.js

@@ -237,11 +237,18 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     this.handleOptionSelect = (event, {
       id
     }) => {
+      var _this$currentPage, _selectedOption$group;
       const selectedOption = this.getPageChildById(id);
 
       // TODO: this line can be removed when React 16 is no longer supported
       event.persist();
-      if (!id || !selectedOption || selectedOption.props.disabled || event.target.getAttribute('disabled') || event.target.getAttribute('aria-disabled')) {
+      if (!id || !selectedOption) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const isOptionDisabled = id !== this._headerBackId && (this.props.disabled || ((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.disabled) || ((_selectedOption$group = selectedOption.groupProps) === null || _selectedOption$group === void 0 ? void 0 : _selectedOption$group.disabled) || selectedOption.props.disabled);
+      if (isOptionDisabled) {
         event.preventDefault();
         event.stopPropagation();
         return;
@@ -366,8 +373,8 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       }
     };
     this.getFirstOption = () => {
-      var _this$currentPage;
-      const children = _react.Children.toArray((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.children);
+      var _this$currentPage2;
+      const children = _react.Children.toArray((_this$currentPage2 = this.currentPage) === null || _this$currentPage2 === void 0 ? void 0 : _this$currentPage2.children);
       const child = children[0];
       if (!child) return void 0;
 
@@ -490,14 +497,14 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     };
   }
   get currentPageAriaLabel() {
-    var _this$currentPage2;
+    var _this$currentPage3;
     // return, if explicitly set
     if (this.props['aria-labelledby']) {
       return this.props['aria-labelledby'];
     }
 
     // if it has title, point to the title label content
-    if ((_this$currentPage2 = this.currentPage) !== null && _this$currentPage2 !== void 0 && _this$currentPage2.renderTitle) {
+    if ((_this$currentPage3 = this.currentPage) !== null && _this$currentPage3 !== void 0 && _this$currentPage3.renderTitle) {
       return this._headerTitleLabelId;
     }
 
@@ -811,7 +818,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     });
   }
   renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
-    var _this$currentPage3, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
+    var _this$currentPage4, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
     const styles = this.props.styles;
     let isSelected = false;
     const _option$props = option.props,
@@ -871,7 +878,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     };
     const isOptionDisabled = id !== this._headerBackId && (
     // Back nav is never disabled
-    this.props.disabled || ((_this$currentPage3 = this.currentPage) === null || _this$currentPage3 === void 0 ? void 0 : _this$currentPage3.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
+    this.props.disabled || ((_this$currentPage4 = this.currentPage) === null || _this$currentPage4 === void 0 ? void 0 : _this$currentPage4.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
 
     // display option as disabled
     if (isOptionDisabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "10.26.0",
+  "version": "10.26.1-snapshot-1",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.0",
-    "@instructure/emotion": "10.26.0",
-    "@instructure/shared-types": "10.26.0",
-    "@instructure/ui-dom-utils": "10.26.0",
-    "@instructure/ui-icons": "10.26.0",
-    "@instructure/ui-options": "10.26.0",
-    "@instructure/ui-popover": "10.26.0",
-    "@instructure/ui-position": "10.26.0",
-    "@instructure/ui-prop-types": "10.26.0",
-    "@instructure/ui-react-utils": "10.26.0",
-    "@instructure/ui-selectable": "10.26.0",
-    "@instructure/ui-testable": "10.26.0",
-    "@instructure/ui-utils": "10.26.0",
-    "@instructure/ui-view": "10.26.0",
+    "@instructure/console": "10.26.1-snapshot-1",
+    "@instructure/emotion": "10.26.1-snapshot-1",
+    "@instructure/shared-types": "10.26.1-snapshot-1",
+    "@instructure/ui-dom-utils": "10.26.1-snapshot-1",
+    "@instructure/ui-icons": "10.26.1-snapshot-1",
+    "@instructure/ui-options": "10.26.1-snapshot-1",
+    "@instructure/ui-popover": "10.26.1-snapshot-1",
+    "@instructure/ui-position": "10.26.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.26.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.26.1-snapshot-1",
+    "@instructure/ui-selectable": "10.26.1-snapshot-1",
+    "@instructure/ui-testable": "10.26.1-snapshot-1",
+    "@instructure/ui-utils": "10.26.1-snapshot-1",
+    "@instructure/ui-view": "10.26.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.0",
-    "@instructure/ui-babel-preset": "10.26.0",
-    "@instructure/ui-color-utils": "10.26.0",
-    "@instructure/ui-scripts": "10.26.0",
-    "@instructure/ui-themes": "10.26.0",
+    "@instructure/ui-axe-check": "10.26.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.26.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.26.1-snapshot-1",
+    "@instructure/ui-scripts": "10.26.1-snapshot-1",
+    "@instructure/ui-themes": "10.26.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",

package/src/Drilldown/index.tsx

@@ -787,13 +787,21 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     // TODO: this line can be removed when React 16 is no longer supported
     event.persist()
 
-    if (
-      !id ||
-      !selectedOption ||
-      selectedOption.props.disabled ||
-      (event.target as HTMLElement).getAttribute('disabled') ||
-      (event.target as HTMLElement).getAttribute('aria-disabled')
-    ) {
+    if (!id || !selectedOption) {
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+
+    const isOptionDisabled =
+    id !== this._headerBackId && (
+      this.props.disabled ||
+      this.currentPage?.disabled ||
+      selectedOption.groupProps?.disabled ||
+      selectedOption.props.disabled
+      )
+
+    if (isOptionDisabled) {
       event.preventDefault()
       event.stopPropagation()
       return