I'm trying to make a simple multiple select using Material-UI's Select component. But one thing that I did not like is that if you unselect anything or just don't select anything and click outside, the dropdown disappears but the label remains focused until you click again or focus on other component.
Any solution?
I want to remove focus from the label/select component when the menu disappears.
Link to component: https://material-ui.com/demos/selects/
Although this is not exactly what You are looking for there is important reason why those fields are kept focused (despite of being too much visibly outlined) and it is a11y.
Thanks to keeping focus on <select> element we are allowed to reselect once selected value eg. by only keyboard (this covers case when you selected bad option unintentionally and want to easily come to the select list back or - like in Yours - easily select again if under any situation we wanted it but we closed the list before it happend).
One important thing is that the MD's <select>'s focus behaviour does not differ from the way native select does it:
And generally should not be changed outlinenone.com without having critical reason.
Related
I would like to implement a dropdown component that shows the selected options upon expanding.
Here is what I have so far, but it tokenizes the selected options, which I don't want. I want them to look similar to a single selection dropdown where they are just shaded/highlighted, but there can be multiple selected.
<Dropdown
text="Filter"
icon="filter"
className="icon"
fluid multiple selection labeled button
options={filterOptions}
/>
As you noticed, Semantic doesn't (currently) support a whole lot of customization regarding multi-select. So, you have two basic options. First, you could use the subcomponents implement the details of dropdown yourself (including all the events that get fired) and only rely on Semantic for the styling. If you choose this route, you might as well write your own.
Alternatively, you can hack together a solution using some Semantic's built-ins.
To do this, you need to change two main behaviors:
1st - you need hide the tags. You can do this by modifying the renderLabel method on the dropdown. Returning null from that method will prevent the tags from being rendered.
2nd - you need to unhide the selected options in the dropdown. There's no built-in way to do this, but you can fake it by inserting a new duplicate option for every option selected. Make sure you attach an onClick to allow deselecting of objects.
Here's a working example: https://stackblitz.com/edit/so-49442592
There's a lot of quirks to it, so feel free to ask questions!
When you tap on a select input on a web page using iOS (iPhone), a spinner widget (the "picker") pops up and lets you spin through and select options within that select. Let's say you've tapped into one of these and the selector widget is open. While this is open, if you use javascript to modify the select options (add, remove, update options via the dom), then these changes don't get reflected in the widget unless the user closes and reopens the widget.
Is there a way to force the browser to update the options automatically?
Edit: Here is an example you can use to observe how updating select options doesn't update the selector widget: http://jsfiddle.net/RrsNk/
<select id="my-select" />
$(function () {
updateSelect();
});
function updateSelect() {
$("#my-select").empty();
for (i = 0; i < 5; i++) {
var ran = Math.random();
$("<option />").attr("value", ran).html(ran).appendTo("#my-select");
}
setTimeout(updateSelect, 2000);
}
Safari uses a UIPickerView to display the dropdown menus. As you would expect, the title of the dropdown component in the page is updated according to the changes in the DOM but the picker view is not tightly coupled with the DOM so it isn't updated. The situation is the same with Chrome and Opera Mini.
So in conclusion, it is not possible what you are trying to implement. You should look for other ways to make your dataset accessible.
I was brought to this question as the closest to my usage case, which is similar but not identical, and might apply to other people as it is a common situation. I found the answers here a touch confusing, so just wanted to clarify my findings.
I start with a dropdown containing just one option: Searching....
When the user clicks, the "picker" pops up (a "tick-list" on iPad, same principle as the "spinner" on iPhone), showing Searching....
An AJAX call gets come choices from the server, and JavaScript updates the options[] to these.
At this point, the picker still shows just Searching..., and the user has no clue that it has been repopulated. The user must click outside to dismiss the "picker", and click the dropdown again to see the new choices.
So in my case I do not have OP's situation of wanting a second dropdown to be displayed depending on what option is selected in the first dropdown. Rather I would like (#1) the "picker" disappear, and then (#2) reappear (with the new choices).
Now, it seems you can do #1, but not #2.
You can dismiss the "picker" by dropdown.blur() (tested in Mobile Safari). See Close a SELECT dropdown list programatically with Javascript/jQuery.
You cannot cause the "picker" to pop up again (at least not in Mobile Safari). See How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?.
So I am at least doing #1, so that the user gets some feedback rather than just being stuck with Searching....
If anyone can state how you can do #2 on Mobile Safari I would be very interested to hear....
Worth trying: populate a second <select> element, and .focus() to it when the item in the first select list is chosen.
Note that iOS only allows a control to be focused within a user interactive events (touchend or click event) so I am guessing Safari Mobile might allow .focus() to work within a <select> (to opening the second select list).
Might not work, since an onchange event of a select list might not be deemed "interactive" or Safari Mobile might otherwise disallow selectElement.focus() to work for some reason.
Edit: I think this shows it is unlikely to work: force safari iOS select component to update when options change
Don't bother trying if you need to contact a server to fill the list. That is because when you get the response event, you are definitely not in a user interactive tap/click event handler, so .focus() is sure to be ignored (although there is a very slight chance an async chain could work).
Firstly, why would you want to - you should adjust the values in your HTML file, or with JavaScript as the page is loading.
However, if the values are changing as the user selects the dropdown, you can use JavaScript to select another element, then reselect the dropdown, causing it to reload.
You can bring focus to an element with the focus() method. Eg.
Document.getElementById("input").focus();
I posted awhile ago and got great insight on hide/show text with javascript... Now I need to take this one step further. Can't find the right combination to make it work.
Here's what I NEED:
When a viewer comes to this page, the first hide/show element is displayed in the text box AND
That element is also highlighted a certain color to display that it is active.
Lastly, as every hide/show element is clicked, that stays highlighted until the next is selected.
Here's a link to my dev site. I think it's easier this way.
http://verus.exigodigital.com/services/
Here was my previous post on the hide/show text:
Showing & Hiding Text with Javascript
REALLY appreciate the help, guys! :)
You could make 2 CSS definitions, one for the currently selected textbox, and one for textboxes that aren't selected
When someone clicks on one of the textboxes to edit its contents (the onfocus event), you just call a function that runs through all of your textboxes, and for each one checks if it's the one with focus - if it is, set the className variable of the element to "selected" or something, and it it's not the one with focus then set it's className variable to "normal" or something
If I didn't understand the question or you need more info, just let me know :)
Hello my name is Shane,
I am coding a custom website. I have built a contact form and am using SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/) for my drop-down feature. I have several Input Fields, two buttons and one Select Box (drop-down). I have the form working perfectly, my issue is with the TabIndex. I have the correct tabindexs coded in each Input, but when I tab to the Select Box it gets ignored.
Here is the page: http://www.lightupco.com/contact.htm
NOTE: you have to click the Envelope/Pen icon to reveal the form.
The only clue I have from researching a forum with similar issue, is it has something to do with the underlying UL throws the tab index off.
I'm not sure what code from my page to include here, to get help figuring this out?
Hey Shane I wrote SelectBoxIt. The reason your select box tabindex is getting ignored is because SelectBoxIt hides the original select box and replaces it with new HTML that is easier to style (a div element). Hence, the tabindex attribute is not being set on the visible drop down (the div element), only the hidden select box.
If you don't mind creating an issue on Github, I would be happy to add a feature to SelectBoxIt that copies any tabindex attribute on the original select box to the new visible drop down. That should solve your issues.
The selectbox has index 0. If you click in the Name: input, your index is 1, so, your indexes as wrong.
Why using tabindex, after all? -.-
I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.