I built a multi select component using the Downshift library. I use useSelect hook. Everything works fine, but there is a small issue that I am not sure if it's a Downshift internal issue or I am doing something wrong.
The issue is when I use checkboxes with element inside of the list item.
<ul {...getMenuProps()}>
{isOpen &&
options.map((item, index) => (
<li key={index} {...getItemProps({ item, index })}>
<label>
{/* This label causing menu to close when clicked on it */}
<input type="checkbox" />
{item.label}
</label>
</li>
))}
</ul>
When you click on the checkbox itself all is working fine (menu stays open) but if you click on the label, it triggers the MenuBlur event and closes the menu. Which is not correct, because always want the menu open if you use multi select, until you click away or focus some other element that is outside of the menu.
Whole reproduction can be found here:
https://codesandbox.io/s/crimson-microservice-b5io0j?file=/src/App.js:2956-3363
Related
I have the following page (the first icon comes from a list that display the items I have, and the second is from a form to add new items to the list):
When I select another svg to be added (click on the second icon), the first icon automatically changes to :
I am using chrome , and this only happens when using a mac, not in windows
The code to display the first and second icon is:
<p
dangerouslySetInnerHTML={{
__html: image,
}}
/>
And the code of the icon picker (second icon) (to display I also use the previous code)
<input
onChange={event => handleImageChange(event, item)}
accept="image/*"
className={classes.hidden}
id={`raised-button-file-update-${id}`}
type="file"
/>
Any thoughts about why is this happening only in IOS?
I am using React Bootstrap Typeahead to navigate through an array of tree data. Each tree has an id that I need to access, but I don't want that to be the labelKey.
I've tried tying into onFocus, but the menu items never seem to gain it. onClick works fine, but I need to support keyboard navigation, too. Adding onKeyPress to the menu items doesn't seem to do anything.
Any help is appreciated. Thanks in advance.
Here is the relevant code:
<Typeahead
filterBy={filterByFields}
id='typeahead-search'
labelKey={(option) => `${option.scientific_name}`}
onInputChange={this.startSearch} // fills props.suggestions
options={this.props.suggestions ? this.props.suggestions : []}
placeholder="Enter a tree name"
renderMenuItemChildren={(option) => (
<div
<!--this is the data I need -->
data-tree-id={option.tree_id}
onClick={this.dropdownClickHandler}
>
<div>
<span>
{option.scientific_name}
</span>
</div>
<small>
<span>
{option.common_name}
</span>
</small>
</div>
)}
/>
I tried using the technique below, but the modal does not blur out the rest of the content. At the same time, I would like to make it reusable and avoid manipulating the elements' z-index
return (
<>
<div className='dashboard-main-neworder' onClick={newOrder}>
<img alt='New Order' src={addorder}></img>
<span>New Order</span>
</div>
{selected && (
<div className='neworder'>
<div className='neworder-title'>
<p>ORDER DETAILS</p>
</div>
You may want to check out portals (https://reactjs.org/docs/portals.html).
They provide a way to attach react nodes somewhere else in the dom tree (let's say next to you #app node so that your modal is always on top of your application, and you can then add a blur effect if that's what you want on your app below the modal.
I have a component which has 2 parts. The first part is text only with an edit button. Part 2 is another component that edits previous texts - which is another component. Now this part 2 has 1 tool-tip. I have written code inside the componentDidMount() hook which opens the tool-tip in the UI but is not read by NVDA the first time.
I have tried using aria-atomic=true, aria-live="assertive", and also tried using aria-labelledby, but none of these helped.
<React.Fragment>
<div className="tipLabels">{`${personalInfoAddress.firstName.label}:`}</div>
<Popover popoverContent={personalInfoAddress.firstName.tooltip} target={`member-firstname-${id}`} className="signing-container-tooltip">
<a id={`member-firstname-${id}`} className="pointer-events helpTipstyle" ref={node => this.tooltip = node} aria-label={`help tooltip ${personalInfoAddress.firstName.tooltip}`} tabIndex="0" role="button">
<span className="sr-only">{`help tooltip ${personalInfoAddress.firstName.tooltip}`}</span>
<span className="material-icons align-bottom ml-1" aria-hidden="true">help</span>
</a>
</Popover>
</React.Fragment>
Tooltip should read by NVDA the first time.
var Vote = React.createClass({
onVote(event){
console.log("event triggered");
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
},
render: function() {
return <div>
<ul>
<li onClick={this.onVote}>
<input
type="radio"
name="vote_for_president"
value="donald"
onChange={this.onVote}/>
Donald
</li>
<li onClick={this.onVote}>
<input type="radio"
name="vote_for_president"
value="clinton"
onChange={this.onVote}
/>Clinton
</li>
</ul>
</div>;
}
});
I need to trigger an event on the click of list item and on change of radio button and have perform the same action. Issue here is the event is being called twice when I click on the radio input and event propagates to click event of list item. Stop propagation and native stop methods isn't working.
The intention here is I want the whole li row to be clickable and event should not be called twice when click on radio button.
Here is jsfiddle
https://jsfiddle.net/dbd5f862/
The change and click events are different events. When a radio button is being clicked, its change event will fire. But, the list item was also clicked, and its click event will therefore fire at the same time. Stopping the propagation of the change event won't affect the click event.
To solve this, you could stop the propagation of the radio button's click event:
<li onClick={this.onVote}>
<input
...
onChange={this.onVote}
onClick={event => event.stopPropagation()}
/>
Donald
</li>
Here's an updated fiddle: https://jsfiddle.net/cpwsd3ya/
If they have the checkbox inside a label, just place the onClick={event => event.stopPropagation()} to the tag label, it worked for me.