Disabled button allows row selection

[hboege]

Issue Description

Clicking a disabled button that is in a selectable list row, causes the row to be selected.

Per UX, this is not the expected behavior.

Issue Type

• [ ] New Feature
• [ ] Enhancement
• [X] Bug
• [ ] Other

Expected Behavior

When clicking on a disabled button, the row should not be selected.

Current Behavior

Clicking on a disabled button in a list row that is selectable will select the row and fire the onChange event.

Steps to Reproduce

1. Create a SingleSelectList and in the rows, include disabled buttons.
2. Click on a disabled button, the button click event does not fire, but the row is now selected. In the code, the consumer would receive the onChange event.

(I would make an example in Kaiju, but it went down.)

Environment

• Component Version: terra-button 1.7.0 and terra-list 1.8.0
• Browser Name and Version: Chrome & Firefox
• Operating System and version (desktop or mobile): desktop Mac

[emilyrohrbough]

This issue is similar to https://github.com/cerner/terra-core/issues/742

[neilpfeiffer]

Spoke with Clayton and my suggestion (minus any outcomes of #742) was we probably want to try and avoid a "button inside of button" situation. A better solution might instead to create either a custom view or new list-item-view template that has this layout without overlapping targets, but side by side areas.

Clayton's had additional suggestion that it be ideal if we could extend the hit targets of the buttons to the space around the button, top to bottom of the list cell, which is a great suggestion. This might be an enhancement for button in the future, otherwise could be built into the custom view layout with extended hit targets and non-traditional button styling.

[dkasper-was-taken]

Closing, functionality will be handled by new custom component with #930