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
Related
I have an edit form, where I have an input that I'm sending an array of data through.
However, in the edit form, even though the input is returning me an array of data to edit, they are as a single value.
That is, if I remove a data returned in this input, all are removed. Also, the names in the input are all pasted together.]
What I'd like to try if it's possible is to return the data this way in the edit form:
And from that, I could remove the name "Melissa" and submit the form again. Through autocomplete, the user should be able to search for another name to replace "Melissa", without changing the values that are already present.
But I'm getting the data this way:
I created a Codesandbox of how I'm doing it in my code: https://codesandbox.io/s/intelligent-ace-9wbz44?file=/src/App.tsx
Can you help me with this?
I'm assuming you want to use testValue as the default options for your Autocomplete component.
Remove value={field.value}
Match testValue's type to studentOptions's type
const testValue = [
{
value: "João Lima",
label: "João Lima"
},
{
value: "Ana Clara",
label: "Ana Clara"
}
];
Change result to result={field.value ?? testValue}.
Working sandbox: https://codesandbox.io/s/condescending-euler-0gt9c9?file=/src/App.tsx
I want to render some music data. I am saving the data i get back from an axios request into
an object called dailyPlaylist and destructure the values i need.
Since the artists and the name take a lot of space, i want to do a line break.
The artists come back as an array, so i could do:
artists: track.artists.slice(0, 5).map(artist => <p>{artist.name}</p>)
this works perfectly fine.
But now I am trying to do a line break also on the "name" property since some of the names are really long.
Is there an option to set a line break after a certain amount of characters?? I tried many methods I would use in vanilla JS but nothing worked.
For example i want to change the long name:
Dreamers (Music from the FIFA World Cup)
to:
Dreamers (Music from the <br>
FIFA World Cup)
or something like that.
My code so far:
const dailyPlaylist = {
tracks: response.data.tracks.items.map(({ track }) => ({
key: track.id,
name: track.album.name,
artists: track.artists.slice(0, 5).map(artist => <p>{artist.name}</p>), // line break between artists
image: track.album.images[1].url
}))
}
Thanks in advance
Unless there is a good reason why you want to achieve this using Javascript, I would do it with CSS instead.
Limit the width of the div or span containing the title. You could use max-width for example.
Something like this:
<span style={{maxWidth:100}} >
<p>{artist.name}</p>
</span>
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.
I use Material UI to have an input field that takes in a certain amount of value in $$. The problem I'm having is, the input box is always disabled. I can see the onClick working in the console, but there is no pointer, and the user can't enter any values.
<Input
variants={{
name: 'dollar',
validationType: 'dollar',
label: 'Dollars',
placeholder: '$ 0.00',
switchAriaLabel: 'Switch to Amount',
}}
selected={{
name: 'dollar',
rawValue: '',
value: 0
}}
value={selectedCashAmount}
onChange={amount => setSelectedWithdrawalSplitCashAmount(amount)}
errorText={_.get(this.state.rolloverErrors, 'text')}
id="EnterInstallmentt"
/>
The box appears with $ 0.00 as placeholder but nothing happens when it's clicked. Any ideas on how to overcome this? Thanks!
What type of value would you like to get? Looks like you mixed up text input field and select field. The problem is rooted in using onClick and onChange functions simultaneously.
However, you're looking for the Autocomplete input field which allows you to use both select lists and text input value.
I ask your help Everybody. :-)
Here is a link to Playground.
The problem you can see if to look at the console or debug log.
If you fill the text fields and press "Enter" key, you can see that only the first field can get the value. Second one is NULL.
If you tap "Enter" key second time - there is no problem at all.
But if you clean fields and fill it up again - the same problem will be back.
If I use just a button with "execute" event - there is no problem.
Is it a bug or something wrong about my code?
I think the problem is that the changed value of the textfield is applied to the model only when the textfield looses focus (or after you pressed Enter). So yo have to set the liveUpdate property to true. Here is your playground example updated.
var userPhone = new qx.ui.form.TextField().set({
required: true,
placeholder: "00123456789",
liveUpdate : true
});