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>
)}
/>
Related
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
I'm making a Modal with TimePicker inside it. But the TimePicker Pop up doesn't have horizontal scroll bar, so it's like:
// here is my sample code
<div id="modal">
<Modal>
<Form>
<Form.Item>
<div id='time'>
<TimePicker defaultValue={...} getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement/>
</div>
</Form.Item>
</Form>
</Modal>
</div>
I had searched on google and tried to add prop getPopupContainer={triggerNode => triggerNode.parentNode} and getPopupContainer={() => document.getElementById('time')} but both of them is not working, same result. even get id modal. Anyone know what happen? Thanks
My expected:
I found my problem! I have some css variable override global style of Ant Design. I removed and it's work. Thank for your help.
I am using bootstrap with reactjs. I am getting data from a list of the array, and that data should be display on screen but when I tried I get a list of data in the vertical direction. I want to make Only 4 element in a row and then it should make another row like buttons in the calculator. I tried to do that using bootstrap grid but it did not work.
This is my code. Here I mapped through and passed data to different component
PadButtons = this.props.currentPadBank.map((drumObj, i, padBankArr) => {
return (
<PadButton
key={padBankArr[i].id}
clipId={padBankArr[i].id}
clip={padBankArr[i].url}
keyTrigger={padBankArr[i].keyTrigger}
keyCode={padBankArr[i].keyCode}
/>
);
Then here I display the data
<div id="display">
<button
className="drum-pad btn btn-secondary btn-lg"
onClick={this.playSound}
id={this.props.clipId}
>
<audio id={this.props.keyTrigger} src={this.props.clip} />
{this.props.keyTrigger}
</button>
</div>
This is my codesandbox Link
Make the following changes
In Drumpad.js
<div className="container">
<div className="row">{PadButtons}</div>
</div>
In PadButton.js
<div id={`display-${this.props.keyTrigger}`} className="col-sm-3">
<button
className="drum-pad"
onClick={this.playSound}
id={this.props.clipId}>
<audio id={this.props.keyTrigger} src={this.props.clip} />
{this.props.keyTrigger}
</button>
</div>
See updated https://codesandbox.io/s/7ymd7
Basically, you had to add col-sm-3 class on the element that is being repeated and it must be inside a wrapper row div.
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
all:
Is there a way to dynamically add a tag (especially a custom tag) in AngularJS?
I have a custom tag recently created of the type:
<mytag type="small" />
which I am attempting to manage in a larger <div> element. What I would like to do is place, within the div element, a button that, when pressed, causes the creation of a new mytag element within the div.
In other words, given an initial page composition:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
I would like to put something in the tagControl's addTag() function that adds a new mytag tag whenever the "Add New Tag" button is pressed, and I'd like to put something in the clearTags() function that removes all added tags when the "Clear All Tags" button is pressed.
Is this possible using AngularJS? If not, can it be accomplished using a third- party library? In either event, how can this be done?
Thanks in advance for any insights...
You need to think in terms of MVC and not DOM manipulation. How many of your <mytag>s you want to show up should be driven by something in your model. And then your HTML would look like this:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" ng-repeat="foo in items" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
Then your addTag() method would just add to the items model and the clearTags() would clear the list. Angular will add the tags for you as you update the model