Skip to content

Fix labeled select enter key error - #18684

Open
momesgin wants to merge 5 commits into
rancher:masterfrom
momesgin:17951-labeledselect-console-error
Open

Fix labeled select enter key error#18684
momesgin wants to merge 5 commits into
rancher:masterfrom
momesgin:17951-labeledselect-console-error

Conversation

@momesgin

@momesgin momesgin commented Aug 6, 2026

Copy link
Copy Markdown
Member

Summary

Fixes #17951

Occurred changes and/or fixed issues

  • Fixed TypeError: Cannot read properties of undefined (reading 'value') thrown when pressing Enter in a LabeledSelect dropdown.

Technical notes summary

When a search yields no results the selected option is undefined. Added null guards in vue-select-overrides.js and LabeledSelect.vue to handle this safely. Unit tests added to cover the undefined case and normal selection behaviour.

Areas or cases that should be tested

  1. Open any LabeledSelect dropdown (e.g. Namespace selector, any form select field).
  2. Type in the search box until there's no option found.
  3. Press Enter

no error should appear in the console and the dropdown should behave normally.

Areas which could experience regressions

  • Any form that uses LabeledSelect — especially those with searchable/filterable option lists.

Screenshot/Video

entrkey.mov

Checklist

  • The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
  • The PR has a Milestone
  • The PR template has been filled out
  • The PR has been self reviewed
  • The PR has a reviewer assigned
  • The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
  • The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
  • The PR has been reviewed in terms of Accessibility
  • The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

@momesgin momesgin added this to the v2.16.0 milestone Aug 6, 2026
@momesgin
momesgin requested a review from codyrancher August 6, 2026 08:23
@momesgin momesgin self-assigned this Aug 6, 2026
@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

🔄 Auto-Retry Failed Run

The Tests workflow failed for the commits below and has been automatically retried.
Follow up on a retried run through its link if needed.

Commit Workflow run Retried at
079b307 31084698757 2026-08-06 09:09 UTC
b7da1b0 31121673430 2026-08-06 17:21 UTC
1115bca 31192698351 2026-08-07 16:03 UTC
ecae3f3 31221758359 2026-08-07 22:23 UTC

Comment thread shell/mixins/vue-select-overrides.js Outdated

let option = vm.filteredOptions[vm.typeAheadPointer];

if (!option) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found one issue and I believe it's related to this section here. Things that shouldn't be selectable are now selectable via the keyboard (not the mouse)

pr18684-stale-pointer.mp4

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The recording is very interesting! I'm not able to type in the authentication field with or without my change. Could you give me the exact steps to get to that point?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before the steps in the video just create 5 basic http secrets, you have to overflow the menu before it's taggable. I confirmed that it's only selectable with these changes, master doesn't show this. If you still can't repro we can hop on a quick call.

image

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh right! I didn't have enough items on the list, thanks for catching this will address it.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, @codyrancher thanks for the review and helping to reproduce the problem

@codyrancher
codyrancher self-requested a review August 7, 2026 17:44
codyrancher
codyrancher previously approved these changes Aug 7, 2026

@codyrancher codyrancher left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like your fix does work and it improves things so I don't want to hold this PR up.

While testing your fix I did notice one more related issue but it's present in master as well so it wasn't introduced by this change. If you'd like to fix it here feel free but I'm fine if you'd just like to merge this.

If you type in the labels starting worth the exact wording they're selectable via pressing enter as well.

enter-select.mp4

@momesgin

momesgin commented Aug 7, 2026

Copy link
Copy Markdown
Member Author

It looks like your fix does work and it improves things so I don't want to hold this PR up.

While testing your fix I did notice one more related issue but it's present in master as well so it wasn't introduced by this change. If you'd like to fix it here feel free but I'm fine if you'd just like to merge this.

If you type in the labels starting worth the exact wording they're selectable via pressing enter as well.

enter-select.mp4

I don't think we'd need a new issue for this, I'll work on it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

LabeledSelect throws console errors and crashes page when hitting Enter on empty search results

2 participants