Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hidden select and visible ui-select have different values #2082

Closed
janhaertel opened this issue Jun 2, 2022 · 4 comments · Fixed by #2144
Closed

Hidden select and visible ui-select have different values #2082

janhaertel opened this issue Jun 2, 2022 · 4 comments · Fixed by #2144

Comments

@janhaertel
Copy link

When I hide options in my select by setting the hidden attribute and also preselect an option, then I get an error when opening the selectmenu.

Here is the code the jquery executes until the error occures:

... this.button.one( "focusin"); -> that._refreshMenu(); -> this._getSelectedItem().data( "ui-selectmenu-item" ); -> this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );

This happens because the options' DOM-element attribute selectedIndex does not match the index from the rendered ui-select-menu.
When I start selecting other entries now, the native select has a different value than what is displayed in the ui-selectmenu-button.

I also created a fiddle, in which the selectmenu won't open at all.

https://jsfiddle.net/isaraystanz/750p69qu/19/

On my local system the selectmenu will show and I can select entries, but the select's value gets messed up so I can't use it safely.

@mgol
Copy link
Member

mgol commented Jun 22, 2022

Thanks for the report. This looks like a 1.13 regression as it works fine with 1.12.1:
https://jsfiddle.net/m_gol/vtf2bwpr/ (EDIT: incorrect test case, look at my next comment)
A modified 1.13.1 test case (as yours used the 1.13.1 JS but 1.13.0 CSS) is, indeed, broken:
https://jsfiddle.net/m_gol/zmnx3ucs/

@mgol mgol added this to the 1.13.2 milestone Jun 22, 2022
@mgol mgol modified the milestones: 1.13.2, 1.13.3 Jul 14, 2022
@mgol
Copy link
Member

mgol commented Jan 2, 2023

It looks like I messed the 1.12.1 version of the test case above. So, let me share new ones with the latest version of jQuery jQuery UI for each line:

@mgol
Copy link
Member

mgol commented Jan 2, 2023

The first bad commit is a2b25ef. There's even a comment from 4 years ago suggesting a similar issue: a2b25ef#commitcomment-26579991

mgol added a commit to mgol/jquery-ui that referenced this issue Jan 3, 2023
Change a2b25ef Made options with
the `hidden` attribute skipped when rendering. However, that makes
indexes misaligned with native options as hidden ones maintain their
index values. Instead, don't skip hidden options but add the `hidden`
attribute to the respective jQuery UI elements as well.

Fixes jquerygh-2082
Ref a2b25ef
mgol added a commit to mgol/jquery-ui that referenced this issue Jan 3, 2023
Change a2b25ef made options with
the `hidden` attribute skipped when rendering. However, that makes
indexes misaligned with native options as hidden ones maintain their
index values. Instead, don't skip hidden options but add the `hidden`
attribute to the respective jQuery UI elements as well.

Fixes jquerygh-2082
Ref a2b25ef
@mgol mgol self-assigned this Jan 3, 2023
@mgol
Copy link
Member

mgol commented Jan 3, 2023

PR with a fix: #2144

mgol added a commit to mgol/jquery-ui that referenced this issue Jan 15, 2023
Change a2b25ef made options with
the `hidden` attribute skipped when rendering. However, that makes
indexes misaligned with native options as hidden ones maintain their
index values. Instead, don't skip hidden options but add the `hidden`
attribute to the respective jQuery UI elements as well.

Fixes jquerygh-2082
Ref a2b25ef
mgol added a commit that referenced this issue May 10, 2023
Change a2b25ef made options with
the `hidden` attribute skipped when rendering. However, that makes
indexes misaligned with native options as hidden ones maintain their
index values. Instead, don't skip hidden options but add the `hidden`
attribute to the respective jQuery UI elements as well.

Fixes gh-2082
Closes gh-2144
Ref a2b25ef
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment