i'm trying to add placeholer to select element in react. At this moment im using:
<option disabled selected hidden>{props.placeholder || "Select options"}</option>
But i'm getting warning:
Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
I have already tried defaultValue and few others, but nothing works.
Cheers,
Daniel
In React, you don't add the selected attribute to the option-tag, but you need to specify a defaultValue prop (Uncontrolled Component) or define the value prop (Controlled Component) in your select-tag.
Here is an example of uncontrolled:
<select defaultValue="apple">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
Related
Seeing this warning in React
Warning: Use the defaultValue or value props on instead of setting selected on .
What does it implies?
It's basically a warning that encourages you to change your code from doing <option selected> to doing <select defaultValue="theValue"> or using a controlled select.
It's probably because React wants to keep consistency between the Form components.
Edit: you can probably implement it this way using useState hook and a controlled select:
const [value, setValue] = useState("defaultValue");
...
<select value={value} onChange={(e) => {setValue(e.target.value)}}>
<option value="defaultValue"> Default </option>
<option value="otherValue"> Other </option>
</select>
I am trying to replace the size="6" with size="this.groupsList.length" but it's not working. How can this be done?
<select name="groups" size="6">
<option *ngFor="let group of groupsList">{{group.name}}</option>
</select>
Background:
I am doing this because the select tag is providing its own scrollbar if the # of elements is > the "size", but since I need to use ngx-perfect-scrollbar instead, I need to change the "size" attribute dynamically. Since I am using ngx-perfect-scrollbar, I need to hide the select tag's scrollbar, but upon doing so it's also hiding some group names (if the "size" attribute is less than the length of groupsList.)
You just need to do this:
<select name="groups" [attr.size]="groupsList.length">
<option *ngFor="let group of groupsList">{{group.name}}</option>
</select>
To fix this I added the following to my .ts file :
const selectTag = document.getElementById('groupsListSelect');
selectTag.setAttribute("size",this.groupsList.length+"")
and added "id="groupsListSelect" in the html:
<select id="groupsListSelect" name="groups" size="1">
<option *ngFor="let group of groupsList">{{group.name}}</option>
</select>
it overrides the size of 1 with the above typescript code just after groupsList has been initialized.
I'm trying to add multiple values to the data-content attribute using angular. In order for me to target the data-content attribute I'm using the [attr.data-content] angular code for it to work.
I have a list of address I loop through and I'm trying to add multiple values to the data-content attribute e.g. address.FriendlyName and address.Description. When I add more than one property it doesn't work. Does any know how to get it working?
See the code below:
<select class="selectpicker form-control m-input">
<option *ngFor="let address of dummyAddresses" [attr.data-content]="address.FriendlyName address.Description">This is a test</option>
<option data-content="Add …">Add new address</option>
</select>
You can do string concatenation inside of attribute bindings:
<select class="selectpicker form-control m-input">
<option *ngFor="let address of dummyAddresses" [attr.data-content]="address.FriendlyName + ' ' + address.Description">This is a test</option>
<option data-content="Add …">Add new address</option>
</select>
You should make sure that your options do not include spaces to avoid creating artifacts
vatCodeList is an error with string codes.
Example: ['34u' , '23' ,'tt']
Need to set the selected value there .
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
Inside your *.component.ts
public vatCode: any;
Inside your *.component.ts you can set the value of vatCode to one of the values contained within vatCodeList, this will update the selected value.
Inside the *.component.html
<select class="custom-select" formControlName="vatCode" [(ngModel)]="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
You can bind the value property like this
<option [value]="i" *ngFor="let i of vatCodeList">{{ i }}</option>
You can try to put an expression to the option tag to make an option selected
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList" {{i == vatCode?'selected':'' }}>{{i}}</option>
</select>
The variable should reference the value of the InputControl. Using reactive forms it would be easy to extract the value and put it into expression.
The easiest way to bind the element to the model with ngModel but you can check if this solution helps.
I've read about both react forms and react two way binding helpers.
But I can't find any saying about how to implement two-way bindings with select elements.
I've tried like:
render: {
var selectValueLink = {
value: this.state.selectedValue,
requestChange: this.handleChange
};
return (
<select valueLink={selectValueLink}>
<option value={'A'}>OPTION A</option>
<option value={'B'}>OPTION B</option>
<option value={'C'}>OPTION C</option>
</select>
);
}
but this.handleChange doesn't get fired when I manually change selected options via mouse clicks.
Is there any way to use React's valueLink nicely with select elements?
Here is an example with select element and everything seems to be working http://plnkr.co/edit/3ueB63nxJ4wwV8rSIusr.