Single dropdown selection does not work when clicking an item and having 'select' action (version 2.2.1) #4183

Closed
dorsha opened this Issue Jun 28, 2016 · 15 comments

Projects

None yet

6 participants

@dorsha
dorsha commented Jun 28, 2016

Installed version: 2.2.1

I have the following dropdown configuration:

      dropdownSelector
          .dropdown({
            fullTextSearch: true,
            preserveHTML: true,
            onChange,
            action: 'select',
            onHide: this.onHide,
            onShow: this.onShow,
            transition
          });

I am using the 'select' action since I don't want the current text to be changed.

Prior version 2.2.x, it works fine.
After the upgrade, the 'onChange' is not dispatched when clicking the dropdown item - but, it dispatched when moving around with the keyboard arrow keys.

I also tried to add allowReselection: true but it did not fix it.

Any idea?

Clicking the item is not doing anything, but moving around with the keyboard works.
image

When I remove the 'select' action it works, but it changed the selected text.

@jlukic
Member
jlukic commented Jul 1, 2016 edited

Can you create a JSFiddle?

There were significant dropdown changes and I want to make sure everything is fine.

@jlukic jlukic added this to the 2.2.2 milestone Jul 1, 2016
@dorsha
dorsha commented Jul 1, 2016 edited

Yes.

Semantic-UI 2.1.8:
https://jsfiddle.net/no7kfus9/
Clicking on the dropdown's items works fine (you get an alert).

Semantic-UI 2.2.1:
https://jsfiddle.net/rgdb931n/
Clicking on the dropdown's items does not trigger the onChange event (you don't get alert).
The onChange it triggered when you try to navigate with the keyboard arrows keys. (in the previous version, navigate with the keyboard keys was not triggered the onChange event)

Ignore the bad style :)

@yaowenz
yaowenz commented Jul 6, 2016

I've got the same issue on 2.2.1

@assafg
assafg commented Jul 7, 2016

Any updates on this issue?

@Kukkimonsuta

The 'onChange' trigger on keyboard arrows keys seem to be intended change and you can disable it by setting new option selectOnKeydown to false. This however still doesn't change the fact, that onChange doesn't trigger on either click or enter when action == 'select'.

Semantic-UI 2.2.1
https://jsfiddle.net/y2vq2u8m/1/

@dorsha
dorsha commented Jul 27, 2016

@jlukic, any update regarding this issue?
It's blocking us for upgrading to Semantic-UI 2.2.x

@jlukic
Member
jlukic commented Jul 31, 2016

Working on this now.

@jlukic jlukic added a commit that referenced this issue Jul 31, 2016
@jlukic jlukic Fixes #4183 Fixes not working correctly since due to incorrect use of…
… new function signature.
24d2b34
@jlukic
Member
jlukic commented Jul 31, 2016

I've fixed this for next patch release.

@jlukic jlukic closed this Jul 31, 2016
@martinduparc

The issue still seems to be present in 2.2.4:

http://jsbin.com/gaqewihaha/edit?html,js,output

Here is my PR: #4510

@dorsha
dorsha commented Aug 31, 2016

@martinduparc try this one: http://jsbin.com/zitasehexi/edit?html,js,output
It works as expect... value, text and selectedItem are defined (and you can see the selected elements).

image

@martinduparc

Thanks @dorsha but this isn't the behavior I am expected. The dropdown you used is multiple and I need the action to be select to retain the current text.

@dorsha
dorsha commented Sep 1, 2016

@martinduparc
So just remove the multiple attribute:

http://jsbin.com/huyazequnu/1/edit?html,js,output

Seems to work (single select + correct values are printed):
image

@martinduparc

@dorsha Works well without the select action but doesn't when the option is set:
http://jsbin.com/dokigupawu/edit?html,js,output

@dorsha
dorsha commented Sep 1, 2016

Yes, because when having the select option, the the dropdown does not change the current text.

From their documentation:
http://semantic-ui.com/modules/dropdown.html#/settings

image

It is more likely to use the select option when you don't want the text to be changed, like in the following dropdown:
image

@martinduparc

The behavior must have changed then since $selectedItem was working in v2.1. The documentation still states the following onChange(value, text, $choice) so it might be outdated?

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