How to disable auto-complete or auto-fill in react-select?
I need an answer without the involvement of the Input custom component.
Can you guys please help me to figure it out?
You can use custom Input component and can use that component with react-select.
Something like this:-
import Select, { components } from 'react-select'
const Input = ({ ...rest }) =>
<components.Input {...rest} autoComplete={'nope'} />
<Select {...rest} components={{ Input }} />
Chrome now ignores autoComplete="off" unless it is on the <form autocomplete="off"> tag.
So, that's why I'm using random string autoComplete="off"
Related
I am creating a react application that is a replica of frogger and I have a form included for when you get a high score to input your name. But you can't type in the input box, no letters show up. Below is my code for the game over/high score divs:
{this.state.collision ? <div >Game Over! {this.checkHighScore() ?
<Modal
isOpen={true}
style={customStyles}
>
<div >
New High Score!
<form style={{zIndex: '9999'}}>
<input type="text" style={{zIndex: '1', color: 'black'}} onChange={(e) => this.onNameChange(e)} type="text" placeholder="Enter Name"/>
<input type="submit" text="Submit" onClick={(e) => this.highScoreSubmit(e)}></input>
</form>
</div>
</Modal>
:
<div></div>
}</div> : <div></div>}
As you can see I'm calling an onChange to store input value in state. I've tried console.log in the onchange function, but it's not registering any input. Also I've tried playing with z-index and making sure the color is black. It seems like something is interfering with event functions for some reason, but not sure what that would be. Thanks for any thoughts!
You most likely need to change onChange={(e) => this.onNameChange(e)} to onChange={(e) => this.onNameChange(e.target.value)} This is because you are passing an event to this.onNameChange, instead of a string.
In the future, don't hesitate to console.log things out. You knew it had something to do with your onChange method, so the next steps would be 1.) to find out if it is firing, and if e is what you expect, and 2.) to follow that through the call to this.onNameChange, logging from within that method to ensure it is being executed with the correct arguments.
This is my first time using Cyrpress, and I am trying to run a test for my React app. The test is after a name is entered in the modal, the submit button will be clicked and you'll be taken to the homepage. However, the .click function is not working, at least I think it isn't since the modal is still there with the name on it. Can someone tell me what I am doing wrong and how to fix it?
This is how I wrote the test:
**fourth.spec.js**
describe ('UI tests', () => {
it('should navgitate to landing page after submitting with button', () =>{
const text = "Christian"
cy.visit('/')
cy.get('.new').type (text).should ('have.value', text)
.click()
})
})
This is how I have the button setup for my modal
<div className="my-modal">
<h1>Welcome!</h1>
<p>Please enter your name</p>
<form>
<input
autoFocus
className="new task"
placeholder="Name"
type="text"
name="firstName"
onChange={this.inputChange}>
</input>
</form>
<button
className="modal-btn"
type="button"
disabled={!this.state.firstName}
onClick={this.displayNameHandler}>
Submit
</button>
</div>
Looks like you're clicking on the input field rather than the button. Try:
cy.get('.modal-btn').click()
You could also try to click on the Submit button based on the button text
cy.get('button[type="button"]').contains("Submit").click();
Vue version 2.6.10
I'll try writing in the code that gives the relevant information to prevent this from being huge
this is part of my component that has to do with select boxes
<div class="input-field">
<input
:id="name"
v-model="searchFilter"
type="text"
tabindex="-1"
:class="{ searchbar: true, 'validation-error': validateError }"
autocomplete="off"
spellcheck="false"
:disabled="disabled || loading"
:readonly="single"
:placeholder="placeholder"
#click="openList"
/>
<input-icon :loading="loading"></input-icon>
</div>
this is the computed part which does the placeholder part
computed: {
placeholder() {
if (this.single) {
const selected = this.singleList.filter(item => item.selected === true).shift();
return selected === undefined ? `Select ${_.startCase(this.name)}` : selected.name;
}
},
},
The issue is, that lets say I've got 3 instances of this component running?
once I choose one of them? the rest change their UI (aka placeholder value)
This is strictly a ui problem since I can tell that the value stays the same but I can't seem to find a way to access that value in order to show it.
I hope this is enough information to go on
Will provide additional code if needed.
Thanks in advance.
I would like to be able to dynamically change the type of an input field between text and password. I tried doing the following:
<input :type="dynamicInputType">
data() {
return {
dynamicInputType: 'password'
}
}
But apparently this doesn't work; vuejs displays the error: v-model does not support dynamic input types. Use v-if branches instead.
It's not clear to me how I can fix this with v-if.
This kind of thing is what's being suggested.
<input v-if="'text' === dynamicInputType" type="text">
<input v-else type="password">
Is it possible to use ref with el-input component from Element-UI? I am trying to use $refsto focus on the input when my Vue instance is mounted. Here is my code:
<div id="app">
<el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>
And in my Vue instance:
new Vue({
el: "#app",
mounted(){
this.$refs.test.focus()
}
})
The focus method is not working at all, even if I move this.$refs.test.focus() into a method and try to trigger it through an event.
The $refs object stores Vue components and should be working fine. The problem is that you are attempting to invoke a focus method which doesn't exist in the component, but rather on an input somewhere inside the component's template.
So, to actually find the input you'd have to do something like this:
this.$refs.test.$el.getElementsByTagName('input')[0].focus();
Not the prettiest line of code ever made, right? So, instead of calling anything in your app's mounted method, if you want to autofocus on the input, just do this:
<el-input type="text" placeholder="enter text" autofocus></el-input>
This can be also solved your problem.
// Focus the component, but we have to wait
// so that it will be showing first.
this.$nextTick(() => {
this.$refs.inputText.focus();
});
Now you can use it like this
<div id="app">
<el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>
this.$refs.test.focus();
https://element.eleme.io/#/en-US/component/input#input-methods