I have an input field, in which I want to add in the placeholder ' tonnes' when the user enters a number. So this is what I came up with for that:
<input tabIndex={isBig ? "0" : "-1" } placeholder="in tonnes" value={plantDetail.co2ReleasedPerYear + ' tonnes'} onChange={(e) => setCO2(e.target.value)} className="specify-detail-inp"/>
But this adds in tonnes after each character. For example, if the user wants to enter 99, it shows up as '9 tonnes9 tonnes', whereas I want it to show up as '99 tonnes'. How can I fix this? I also tried slicing the text from the end as mentioned here -> Is there a way in react native to have a permanent placeholder inside of a text input?, but it didn't work.
Changing from
onChange={(e) => setCO2(e.target.value)}
To
onChange={(e) => setCO2(e.target.value.replace(' tonnes', ''))}
Could be one way to solve the problem, however i don't think its the best way. Best way in my honest opinion, would be to just have (tonnes) written in input label.
Related
I have a state which fills by name of empty form inputs. first time when you click on button it fills by some key but it is empty at all but in second time it fills by some key like "age" or other thing. Do anyone face with this kind of problem?
Check if this works:
<input value={age} onChange={(e)=>setAge(e.target.value)} />
or
setAge(()=>newValue);
if not, please share some code.
I use react-testing-library in my application. Normally, to check if the input is in the form, we use getByLabelText. For example:
getByLabelText(/name/i)
But what if my input does not have any label? This is because of the design (UI) so I cannot have a label for the input. How can I check if that input exists in the form?
You can use the following to target a text input field.
getByRole('textbox', {name: /name/i})
More info https://testing-library.com/docs/queries/about#priority
You can also add an aria-label to your input:
<TextField inputProps={{'aria-label': "example" }} />
and then in your test:
expect(screen.getByRole("textbox", { name: "example"})).toBeInTheDocument();
If you don't know an expected text in your input, you can add "data-testid" to your input and find it like that:
<input data-testid="my-input"/>
const myInput = getByTestId('my-input');
You could add a test ID to the input that solely will be used for testing purposes.
<input data-testid="your-id" />
And in your test you would do a query rather than get as get will fail the test if the element doesn't exist at all.
expect(queryByTestId('your-id')).toBeInTheDocument()
Or you could search by display value to look for the input value
expect(queryByDisplayValue('input-value')).toBeInTheDocument()
I am new to react and would like to create an entry field where a user can enter multiple email address
So far, I have an email field
<TextValidator
id="email"
aria-label="email"
label="Email address used to register"
required
name="email"
value={this.state.email ? this.state.email : ""}
onChange={this.handleChange({
name: "email",
index: 0
}).bind(this)}
autoComplete="email"
margin="normal"
variant="outlined"
fullWidth
validators={["required", "isEmail"]}
errorMessages={[
"this field is required",
"email is not valid"
]}
/>
I would like either a way to enter multiple emails in the single field or maybe an add/remove button to do it.
This is want my input look like at the moment
Thanks for your help
Try React multi-email - this is exactly what you're looking for.
Here's a link to the online demo where you can check it out.
Hope this helped!
I think to achieve that, you will need a stateVariable that holds the current text being entered by the user which you keep checking to see if its a valid email or alternatively check if the next key entered is a space and if so, add it to an array of existing emails.
To display the entered emails, you will need to use an editable div and a separate component that shows a single email, then loop through entered emails and display them as components inside the mail editable div
Something like
<EditableDiv>
{ email in emails
<Email email >
}
<CurrentEntry {EmailBeingEntered} />
</EditableDiv>
The above ain't really react but just an overview of what it might look like
A simple react component to format multiple email as the user types.
Simple code
No dependency
Small size
Simple customization
demo
https://codesandbox.io/s/jpvjk8m5o9
https://www.npmjs.com/package/react-multi-email
So i am querying the user for input to save a document that they are writing. I want the first letter of the input to be a capital letter - by automatically toggling on the capital "up" arrow when the keyboard is shown. I have the following code:
AlertIOS.prompt('Saving Document',
'Please name this document',
[{text: 'Cancel'},
{text: 'Save', onPress: input => this._saveFile(input)}
]
)
Just wondering how i can do so. I realise that i can edit the input in the back end and capitilize the first letter there, but i am looking for a method in which the user can see that the first letter is a capital when entering input.
Most IOS apps have this feature and i was wondering how to do so in react native.
Thanks in advance.
As the comments say, at the moment there is no way to do this with the AlertIOS component, at least not without getting into native code. But take a look at https://www.npmjs.com/package/react-native-prompt, it appears this might have the functionality you are looking for. You should be able to set the autoCapitalize prop on the textInput using this property:
textInputProps (Object) -- Additional props on the input element
I'm developing an app containing a form which has a text input with ng-model="description".
Now I want to validate this text input using ng-maxlength="50" and required. This works fine, but I also want to add a character counter (like 67/50) shown at all times. I'm using the following code to display the counter: {{description.length || 0}}/50
The issue with this, however, is that description.length doesn't return a value when it's greater than 50, because description input is invalid. In my scenario the counter would default to 0/50 when there's no input (and that's fine) but also when input exceeds max length.
I would also like to display my counter in red when the input length's invalid, but that shouldn't be too hard using angular validation css classes.
Of course I could provide custom validation, but I'm positive there's an easier solution.
Use the form element $viewValue instead like this:
<form name='form'>
<input type="text" name='description' ng-model='description' ng-maxlength="50">
{{form.description.$viewValue.length || 0}}/50
</form>
See this plunker