Semantic-ui: Is there a way to prevent dropdown from dropping down on focus?

Created on 31 Mar 2015  路  13Comments  路  Source: Semantic-Org/Semantic-UI

Currently dropdowns automatically drop down when they receive input focus. Is there a way to disable this? This is a rather annoying behavior in some situations: for example when a form is rendered where first field receives focus automatically and is a long dropdown - the dropdown now obscures part of the form while user had no intention of modifying pre-selected value, also when a form has several dropdowns tabbing through fields produces too much animation (and tabbing through a dropdown field to reach another field takes two tab key strokes instead of one). Also, if user leaves a search dropdown focused and switches to another browser tab, then comes back - dropdown drops again.

Enhancement

Most helpful comment

@jlukic Thank you for pointing me in the right direction. The answer to my original question is no, this is not related issue #2041. Regardless, I'll make a note of the "solution" here.

The autofocus Modal setting is available, but undocumented. The following resolved the issue:

$(selector).modal({
    autofocus: false,
}).modal('show');

All 13 comments

Are you referring specifically to a search selection dropdown? You can disable other dropdowns from being tabbed by specifying allowTab: false, see more in the settings

No, not just search selection, any dropdown. Search selection, having an actual input field, does this in more cases: click the input field, dropdown opens, click outside of dropdown it closes, but caret is in the input field, go to another browser tab, come back - observe dropdown opens again. allowTab: false doesn't seem to affect this at all (actually I'm not sure what it does, appears to make no difference). And it's not like I don't want to tab to my dropdowns and search dropdowns, I just don't want them to open automatically when I do.

Please create a test case, and a set of steps to reproduce your issue. This is the minimum reqs for getting support.

This happens on the doc/demo page at http://semantic-ui.com/modules/dropdown.html, is that not sufficient?

Perhaps you are new to open source but this is being done _for free for your benefit_, the least you can do is make the issue as simple to debug as possible for the person helping you.

I think Semantic UI is amazing and I am very grateful to you for making it.
I agree that it is very annoying when someone wants help with an issue they can't demonstrate.
However, the dropdown behavior I am describing is the default behavior readily observed at http://semantic-ui.com/modules/dropdown.html, not some obscure issue that is hard to reproduce. Me asking whether it's not sufficient to look at the doc/demo page is not trying to be snarky, I just genuinely don't know how a dedicated test case would be different from the existing doc page. Apparently I am doing a bad job trying to explain the problem with the default behavior. I apologize.

I've added dropdown showOnFocus as an option.

Test cases are to help me have a uniform process for debugging and resolving issues. Resolving issues requires adjusting code and verifying changes within my dev environment which is a different process than just confirming an issue exists.

Thank you

Is this at all related to this issue I've come across when including searchable dropdowns within Modals?

Opening on focus is a setting in 2.0 branch. See notes above.

There is a modal setting to focus first input on show, otherwise the focus must be coming from somewhere in your app logic

I understand that showOnFocus is a 2.0 setting...But that's not what I asked. The issue isn't that it's opening on focus (that _should_ happen); rather, the issue is that it's focusing at all. It's also not the first input of the modal, and there's no other app logic (as demonstrated by the minimal, verifiable, and runnable example on Stack Overflow).

@jlukic Thank you for pointing me in the right direction. The answer to my original question is no, this is not related issue #2041. Regardless, I'll make a note of the "solution" here.

The autofocus Modal setting is available, but undocumented. The following resolved the issue:

$(selector).modal({
    autofocus: false,
}).modal('show');

Yes, apologies about that. I've already merged a PR to add the missing documentation, but haven't had the chance to redeploy docs. I'm visiting family.

Was this page helpful?
0 / 5 - 0 ratings