I'm using ReactJS to render my DOM.
I want to add the spellcheck="false" attribute on a text input, so I do this:
render() {
return (
<div>
<input type="text" placeholder="Name" spellcheck="false" />
</div>
)
}
Then, when I inspect with chrome, the spellcheck attribute is not present.
Try using spellCheck instead. (Note the capital C)
The docs are good for explaining how default HTML attributes should be referenced in React.
Related
I'm using Material-UI and React Testing Library in a project and I'm having a hard time with TextField that is set to type="password". I understand that, in tests, it's not a good practice to default to getting an element using testId field, but I cannot find a way to get to the password input field. I cannot use getByRole because apparently <input type="password"> doesn't have a role. There is no text in the input box, nor placeholder text, and when I try to use getByLabelText I'm getting this error message:
TestingLibraryElementError: Found a label with the text of: Password, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
When I reviewed the rendered elements in the test (I used screen.debug()), I realize that this is how Material-UI composes the TextField:
<div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
data-shrink="false"
>
Password
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
name="pass"
type="password"
value=""
/>
</div>
</div>
</div>
So, the <input> is not embedded inside the <label> and also the label doesn't have a for attribute to associate it with the input. So, how else would I be able to get a hold of that password box without using testId?
I think you need to set the id prop to TextField for it to associate the label to the input
I want to do something like the following:
return (
<input
{(tagsArrayEmpty) ? placeholder='enter your tags' : placeholder='empty'}
type="text"
/>
)
but I get the error: Parsing error: Unexpected token, expected "..."
Is it possible to conditionally render just the placeholder portion of the input tag rather than the full input tag? I read the documentation for conditional rendering here but all the examples only render full tags at a minimum. Just wondering if there is a way.
Sure, like this:
return (
<input
placeholder={tagsArrayEmpty ? 'enter your tags' : 'empty'}
type="text"
/>
)
I am using a React redux-form input and this is my code:
return (
<Field
key={name}
component={SurveyField}
type="text"
label={label}
name={name}
autocomplete="off"
/>
);
I don't want chrome to autoComplete the form.
I have tried both but none working.
autocomplete="off"
autoComplete="off"
I suppose Chrome just ignores the autoComplete. I have seen the other StackOverflow questions but they are not helpful.
I find that adding the autocomplete property to the <input autoComplete="off"/> tag defined in your component callback function rather than depending on the redux-form <Field /> tag to pass this property to DOM will properly set this property in the html generated and autocomplete="off" will work as expected.
I am new to React.
I am using Bootstrap to render my page. All the other tags seem to be working apart from the InputGroup.Text. It doesn't render the id attribute of the text field. It looks as below if I inspect the element:
<input placeholder="Type your question here" class="form-control">
I have tried directly entering "1" as the id and that doesn't render either.
<InputGroup size="sm" className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id={ans.answerno}>{this.mapAlpha(ans.answerno)}</InputGroup.Text>
</InputGroup.Prepend>
<FormControl placeholder="Type your answer here" />
<Form.Check type="checkbox" id={ans.answerno} label="mark answer" />
</InputGroup>
I have checked the documentation online and this seems to me how it should work. Can anyone advise?
It seems like the id is located inside a span before the <input>.
Even checking the documentation rendered code
How can I test for the type of the input field in the JSX of my react component?
For example, lets say the following is a part of JSX:
<form>
<input type="number" name="testfield" />
</form>
Now I want to write a test case that which should check if the type of the input field is a number or not?
Say you have :
<form >
<input type='text' name='name' id='name' onChange={this.handleChange}/>
</form>
You can create a function in the class like :
handleChange(event){
console.log(event.target.type) // Use this to compare the type.
if ( event.target.type == 'number' ) {// Your case }
}
You can also use event.target to compare different properties like the name(event.target.name), etc.
In case you have multiple elements inside the <form> start by comparing the names of the target so you know what element was changed since we may be using the same handler for each element.
You can use css selectors to find the element in the component, and assert its existence.
expect(wrapper.find('input[name="testfield"][type="number"]')).toHaveLength(1);