I have the following radio button:
<input type="radio" class="form-control" name="productSel" id="product1"
(change)="handleChangedEvent(retailProduct)"
[checked]="retailProduct.id === currentRetailProduct.ReplacementRetailProductId">
What I would like to accomplish, seems rather simple, but I cannot get it to work.
As you can see, I have a condition on my [checked] attribute. When this condition evaulates to true, I would like my (change) event to fire, but it does not. It only fires when I select the radio button on the page manually.
How can I accomplish this?
You can try this:
<input type="radio" class="form-control" name="productSel" id="product1"
(change)="radio.checked && handleChangedEvent(retailProduct)"
[checked]="retailProduct.id === currentRetailProduct.ReplacementRetailProductId">
I use material ui v0.20.0 and I have to prohibit saving the password for a user with TextField. I added props to TextField autocomplete='nope' cause not all the browsers understand autocomplete='off'. It seems that the last version of Chrome 63 does not accept it. Sometimes it does not work and sometimes it does. I can not get why it works so hectic. When chrome asks to save password and I save it, and after that I want to edit input I still have this :
<TextField
name='userName'
floatingLabelText={<FormattedMessage id='users.username' />}
value={name || ''}
onChange={(e, name) => this.changeUser({name})}
// autoComplete='new-password'
/>
<TextField
name='password'
floatingLabelText={<FormattedMessage id='users.passwords.new' />}
type='password'
value={password || ''}
onChange={(e, password) => this.changeUser({password})}
autoComplete='new-password'
/>
Looks like it works in Firefox(v57.0.4)
By default TextField does not have autoComplete='off'
To Disable auto Complete in material-ui TextField.
its works for me
<TextField
name='password'
autoComplete='off'
type='text'
...
/>
should be autoComplete='off'
autoComplete='off'
This seems to have worked for me (we are using material ui with redux form)
<Textfield
inputProps={{
autocomplete: 'new-password',
form: {
autocomplete: 'off',
},
}}
/>
"new-password" works if the input is type="password
"off" works if its a regular text field wrapped in a form
With Material UI input you can use
autoComplete="new-password"
So you will have something like this input :
<TextField
autoComplete="new-password"
/>
This was a big help for example to avoid more styles from the browser on a login page.
Hope this helps to others!
the autocomplete must be inside inputProps
<TextField
inputProps={{
autoComplete: 'off'
}}
/>
is good way
As mentioned in the Material-UI documentation:
Add the following to the TextField.
<TextField
inputProps={{
...params.inputProps,
autoComplete: 'new-password',
}}
/>
It disables the browser autofill suggestions and can also be used on the Autocomplete's TextField component.
Note: Also there are two separate properties inputProps and InputProps. You can apply both on the same item. However, the inputProps prop fixes the autocomplete issues.
Try enclose the Textfield inside the form tag with noValidate prop.
Eg:
<form noValidate>
<TextField
label={'Enter Name'}
required
fullWidth
autoFocus={true}
value={text}
onChange={(e) => (text = e.target.value)}
/>
</form>
I don't know for what reason the autoComplete prop doesn't work. But the above works.
The key is to use a random text that the browser has not saved previously from any form the user has filled such as "#+" or "ViewCrunch". This will also solve auto complete issue with chrome browser that leaves all fields in blue background.
<TextField
autoComplete='ViewCrunch'
/>
//Recent versions of MUI
<TextField
autoComplete='off'
/>
Fixed. Just need to add above real input field
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN
https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - medium
tested on EDGE, Chrome(latest v63), Firefox Quantum (57.0.4 64-бит), Firefox(52.2.0)
fake fields are a workaround for chrome/opera autofill getting the wrong fields
const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}
<input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />
<TextField
name='userName'
autoComplete='nope'
...
/>
<TextField
name='password'
autoComplete='new-password'
...
/>
This worked for me:
Whenever you want to disable a autofill for the password field (also the above field), just put this in your password input:
<input type="password" name='any-filed-name-here-password' autoComplete='new-password' />
The important thing is to have the autoComplete='new-password'
The autoComplete attribute of the input props and text field props are meant to follow the HTML spec.
It seems to not work for some of us. Strangely, I don't see off listed in the spec but it doesn't turn it off for me while strings such as nope, nahhhh do - that is strings that aren't in the spec.
So I settled with none which seems to turn off the suggestions and keep things neat.
Also, setting the autoComplete prop of the text field didn't work for me...
<TextField
className={classes.textfield}
label='Invitees'
placeholder='A comma seperated list of emails'
variant='outlined'
value={users}
onChange={onChange}
inputProps={{
autoComplete: 'none',
}}
/>;
I ran into this recently. I tried everything I found on the web but ultimately the fix that worked for me was to do the following.
DO NOT set the type="password" on the TextField component
DO Set it along with autoComplete: 'new-password' on the input props like this:
<TextField
label="Password"
className={classes.textField}
name="password"
inputProps={{
type:"password",
autoComplete: 'new-password'
}} />
Id like to thank and expand on #Elie Bsaisbes answer https://stackoverflow.com/a/70000217/16538978
For the life of me, autoComplete = "off" / new-password etc... would only work on some forms, and not others. Only in chrome. Finally, the solution was to add a custom name as said in the linked answer like so
<TextField
name="noAutoFill"
label="Password"
variant="standard"
defaultValue=""
id="password"
type="password"
/>
You do no longer need to provide the autoComplete='off' for the AutoComplete component on the master branch. It's added by default.
Check this thread for more details.
Add the attribute to the
<TextField
inputProps={{
autoComplete: "none",
}}
error={!!errors.fieldname}
{...field}
label="Field Name"
required
/>;
If the autoComplete doesn't work, keep it but add a unique 'name' property to the component
None of the above worked for me, but I changed the input type to search and it worked:
<TextField type="search" ... />
I have the following HTML calendar:
<h:inputText t:type="date" value="#{data.dueDate}">
<f:convertDateTime pattern="yyyy-MM-dd"/>
</h:inputText>
How can I add the min attribute for this?
t refers to xmlns:t="http://xmlns.jcp.org/jsf/passthrough"
With input type date you can use min and max attributes. You can set the min attribute the same way you used passthrough to set the type="date" attribute. So, for example:
<h:inputText t:type="date" t:min="2016-12-31" value="#{data.dueDate}">
<f:convertDateTime pattern="yyyy-MM-dd"/>
</h:inputText>
See also:
https://www.w3.org/TR/html5/forms.html#date-state-(type=date)
https://www.w3.org/TR/html5/infrastructure.html#valid-date-string
min/max attribute with type = date on HTML5
http://caniuse.com/#feat=input-datetime
I've this input in a search modal used to find products by Id or Description in this system I'm working:
<input class="input-xlarge" type="text" onkeypress="productsDescription(this.value);">
And in my javascript I have this function
function productsDescription(val) {
alert(val);
}
It happens that when I press a key inside this input, the alert function shows me the value as it was BEFORE the key was pressed. Is there a way to capture the valeu AFTER the key?
Use the onkeyup event instead the onkeypress happens BEFORE the value gets changed
<input class="input-xlarge" type="text" onkeyup="productsDescription(this.value);">
All I want is to give a placeholder for the selectMenu. I am using select items for getting the values in the menu.
<h:selectManyMenu required="true" class="choose-group chosen-select" value="#{sentMessage.selectedUserGroups}" >
<f:selectItems value="#{sentMessage.userGroups}" />
</h:selectManyMenu>
Currently its showing 'Select Some Options', but what I needed is 'Choose User Groups'.
I tried using this placeholder for <h:selectOneMenu>
But still no hope.
Try this one.
<h:selectManyMenu required="true" class="choose-group chosen-select"
value="#{sentMessage.selectedUserGroups}">
<f:selectItem itemLabel="Choose User Groups" noSelectionOption="true" itemValue="#{null}" />
<f:selectItems value="#{sentMessage.userGroups}" />
</h:selectManyMenu>
You need to produce the html equivalent of:
<option value selected="selected" disabled="disabled">Choose User Groups</option>
To do that, you need to specify the option as disabled:
<h:selectManyMenu required="true" value="#{sentMessage.selectedUserGroups}">
<f:selectItem itemLabel="Choose User Groups" noSelectionOption="true" itemDisabled="true" />
<f:selectItems value="#{sentMessage.userGroups}" />
</h:selectManyMenu>
Note that the "noSelectionOption" attribute has no affect on the html output, but instead prevents selection of that value on the backend when a value is required, in which case the user will get a FacesMessage.