I have a Dropdown, I select a value, lets say "myName", then I have a button that I click and it will display a form to fill with "myName" in one of the fields. But there is a UI issue. When I click that form button it display the form but the Dropdown selected item will disappear.
I tried debugging and it seems there is an issue when rendering it for second time. it fails in a function called commitRoot(root, finishedWork); in react-dom.js file and I don't know what it means as i'm very new in this area.
render() {
return (
<Dropdown
className='titlebar__dropdown'
options={this.myOptions}
onChange={this.selectedNameChanged}
selectedKey={PlanSelector.selectedName}
placeholder='Select a Plan'
/>
before clicking the form:
After clicking, and it doesn't show the options anymore:
You are probably overwriting the state of the property holding the value of the dropdown.
Make sure it is not again set to "" as you must have kept.
On the click of the button, the state is changed and as a result, render() is ran again because of which it is getting overwritten make sure to hold your state when the button is clicked and check if you are changing the state of selectedNameChanged property.
Hopefully, this helps,if not can you please provide the method which is called on button click.
Thanks
Related
I have a component that dynamically builds check boxes, from the result of an API call.
I am selecting the first radio button in a group, as a default, when the component is created.
Based on what radio button is checked/selected the page displays differently. So the radio button is selected after the page loads, but the onChange function does not get fired to display the page correctly. I am looking for a way to fire the onChange event after loading, API fetch, and displaying the radio buttons.
Thanks you helped me figure it out. In the final line of my useEffect hook, I click the first radio button in the group. That both sets the default and fires the change event. I tried setting it to check but that did not fire the change event.
useEffect(() => {
.
.
document.getElementsByName('rbImageGroup')[1].click();
}, []);
I've added a simple form with one input and a save button. The save function is called and works as expected.
But I now want to add a boolean to disabled logic on the save button. So in my current page I have a state called email which I want to disable the button if this is empty.
What I did try is the following, passing {!this.state.email} into the disabled property of the button but it doesn't disable the save button. Similar to this example:
<Button primary={true} disabled={!this.state.email} onClick={this._onSave}>Save</Button>
I also logged the value in the _onBlur method and I can see that email state is being populated.
Question:
How can you bind component state to button disabled property?
This is a gist of my current component:
http://hastebin.com/jufahijoza.js
Look at my comments for an explanation.
_onBlur(event) {
//if(true or false)
// this.refs.myInputButton theres your button now disable/enable it with javascript
this.props.setUserEmail(event.target.value);
console.log(this.state.email);
}
I am using a Angular md-autocomplete which starts showing users the auto completion options in a drop-down after they first type in the text box. Is there anyway to have this dropdown shown when the user first clicks in the text box as well?
Here is the md-autocomplete html:
<md-autocomplete flex
role="combobox"
md-selected-item="text"
md-no-cache="true"
md-search-text="searchText"
md-search-text-change="searchTextChange(searchText)"
md-items="item in getMatches(searchText)"
md-item-text="item.autocompleteVal"
md-min-length="0"
md-selected-item-change="$parent.selectedItemChange(item)" on-enter ng-cloak>
<span id="autocompleteText" md-highlight-text="searchText" md-highlight-flags="^i">{{item.autocompleteVal}} </span>
</md-autocomplete>
I was having same issue but setting the value of md-min-length to zero starts working
md-min-length="0"
Update:
If it still does not work then make sure that the searchTerm is initially set to null
Controller
vm.searchTerm = null
Html:
md-search-text="vm.searchTerm"
As #Hodglem pointed out, the current Material docs use the valueChanges observable of the FormControl object to detect changes and filter the options to display on the autocomplete panel. They prime the initial value as "null" so that all the available options will display.
However, often your list of options comes from a service (as in my use case) and your list is empty when startsWith(null) runs, especially if this code is in the ngOnInit() method like it is in the Material docs. This method runs immediately, while the service takes time to fill the list.
Autocomplete is smart enough to not open the panel if there are no options, so the initial focus on the element will not open the panel since there are no options to display. Even after the list fills from the service, the filter only gets triggered with a change in value on the control, so until the user starts typing, autocomplete's list of options remains empty, and therefore the panel remains closed.
I have two solutions:
Move the observable set up out of the ngOnInit() method, and into the subscribe() method that follows the call to the service that retrieves the options. After setting the list, run the observable set up. Now the panel will open on focus since the panel has options to display. (Make sure that the initialization of the FormControl remains in the ngOnInit() method, or the binding in the template will throw an error.)
Scratch the observable approach, and bind the filter method to the control's native events, such as (focus) and (input). In the filter method, check if the passed-in value is null or empty, and if it is, return the entire list. This way, the filter gets triggered every time the user clicks on the control or changes its value, and as long as the user clicks on the control at least once after the service filled the list of options, the panel will display. Depending on your use case, I found that by the time the user moves the mouse and focuses on the control, the service already delivered the goods, and the panel opens.
Seems like demo from site works as you expected.
https://material.angularjs.org/latest/demo/autocomplete
For Angular 2 and Material 2, setting startWith() on the valueChanges() observable of the control to null will show all of the values. Omitting this will result in the user first needing to type a value in to see results.
All values displayed on focus:
this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges
.startWith(null)
.map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));
No values displayed until entry:
this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges
.map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));
I haven't, but I imagine you could play around with startWith() to set the on focus list to be filtered by something also.
Just add the following line
md-min-length="0"
This will trigger a md-items calls even when just clicked
I have a list of checkboxes - that populate a tag textarea - when the user remove a tag I also want to uncheck the checkbox
When the user navigates away and come back the checkboxes should maintain the state they were in - ie check against the tags and see if they match
So I need
Click state to pouplate tags
initial check to see if the checkbox should be checked or not - the scope of the checkboxes is killed by navigating away unless I rootScope it maybe?
Delete tag unchecks the check box
Only 5 checkboxes in a list can be checked the 6th would return no.
Needs to be a select all with above taken into account
I am really quite lost in how to architect this at the moment
going from click to change to model to checked....
many thanks for any help
try to do the next thing - create an object { clicked : true, label: label}
when you goes throught ng-repeat you have an object to render and state, when somebody delete label - you should just add whole object to handler and there change checkbox state tie to needed element.
P.S. If you add some code we can work with your stuff.
I have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0