In my TextInput I need to show a "New Line" key and also the "Done" key.
Currently I am only able to get one or the other. I can get the "New Line" key but setting <TextInput returnKeyType="none" multiline>, however I don't get the "Done" key anymore:
Is it posible to get both? I am testing on Android, I haven't tested on iOS yet.
Unfortunately, the short answer is no.
For the returnKeyType the documentation states can only one of the enum values...
returnKeyType?: enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')
Determines how the return key should look. On Android you can also use returnKeyLabel.
Cross platform
The following values work across platforms:
done
go
next
search
send
Android Only
The following values work on Android only:
none
previous
iOS Only
The following values work on iOS only:
default
emergency-call
google
join
route
yahoo
Related
I am trying to tap the More button in a XCUITest:
XCUIElement* moreKey = self.app.keys[#"more"];
[moreKey tap];
and on iPhone simulator it works fine, but on iPad simulator it crashes when I try to tap it:
Failed to Error Domain=com.apple.dt.xctest.ui-testing.error Code=10006
"Multiple matching elements found for <XCUIElementQuery: 0x600000c51c20>
...
The issue is that it finds multiple instances of the "More" button on iPad (which, unlike iPhone, it has two of):
...}
↪︎Find: Elements matching predicate '"more" IN identifiers'
Output: {
Key, 0x15e670f80, {{0.0, 1049.0}, {132.0, 60.0}}, identifier: 'more', label: 'numbers'
Key, 0x15e678570, {{546.0, 1049.0}, {98.5, 60.0}}, identifier: 'more', label: 'numbers'
So, it doesn't seem to know which one to click.
I found similar questions, but for custom buttons, where solution was to make their identifier unique. That's not applicable for Apple's own "More" key, the identifier of which I do not control.
How do I fix it?
Can I apply elementBoundByIndex: here somehow?
XCUIElement* moreKey = [self.app.keys[#"more"] firstMatch] does the trick.
I will leave the question open in case anyone has a better (or just different - I will accept different) solution.
For a DetailsList or ShimmeredDetailsList, I need to add two arrows (one up, one down) besides the column name in the column header so that the user can look at the grid and tell which column is sortable and which is not. Currently I am using isSorted and isSortedDescending in IColumn, but that only brings an up or down arrow once the user clicks on that column. It doesn't produce any icon that tells the user by just seeing the grid which column is sortable. How can that be done ?
You need to register the sort icon.
registerIcons({
icons: {
sort: <Sort />,
sortdown: <ChevronUp />,
sortup: <ChevronDown />,
},
});
https://github.com/microsoft/fluentui/wiki/Using-icons#custom-svg-icons
Hai i am struggling with keyboard problem in android, when i want to type any thing in text input it show some suggestions in keyboard, I don't want those suggestions, Can any one help me that how to avoid those suggestions.
Any help much appreciated, the above image from nexus 6.
Here is my TextInput code
<TextInput
style={styles.TextInput}
value={this.state.currentWord}
onChangeText={(text) => this.setState({currentWord:text.trim()})}
placeholder="Type Your word here"
autoCapitalize='characters'
autoCorrect={this.state.autoCorrect}
autoFocus={this.state.autoFocus}/>
In state i declare autoCorrect to be false
When using autoComplete="false", React native sets the underlying native android input type to TYPE_TEXT_FLAG_NO_SUGGESTIONS and clears out TYPE_TEXT_FLAG_AUTO_CORRECT, effectively telling the system not to offer any suggestions (see source code). This is the recommended way of disabling text suggestions per the Android reference guides.
The problem is it appears that some (or many?) HTC devices do not honor this setting. From my research, it appears some Samsung devices might not support this either. It is reasonable to assume that other manufactures will not honor this setting - which flat out just sucks. This is one of the big problems with Android - somehow they didn't learn from Microsoft - that sleazy manufacturers will destroy the reliability of your products and it takes years (a decade, roughly) to even begin to undo the damage </rant>. (note: I'm an Android fan).
According to Daniels answer it appears someone had success setting the text type to use TYPE_TEXT_VARIATION_FILTER - which tells the device that your input is being used to filter a list of items. Lets try to modify the existing text input and see if it works - then you can build our own if you want:
You need to find the file ReactTextInputManager.java. From the React Native folder, it will be located at this path:
[react-native]/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
Around line 378 you will find a method called setAutoCorrect - update it to the following:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER))
: 0);
}
Build your app and test. If it doesn't work, try removing both instances of InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | (including the pipe) from the above code and try again. If that doesn't work, I think you're out of luck.
If it does work, then you can either a) instruct everyone on your team how to modify the react native component before building (hacky and unreliable), or b) build your own text input component. You should be able to copy and paste the existing TextInput code and shouldn't have to write much native code at all - mostly just renaming things. Good luck.
Update: going further down the rabbit hole, you can also try the setting TYPE_TEXT_VARIATION_VISIBLE_PASSWORD. So here is the kitchen sink - I'm assuming you can read the code well enough to play around with different combinations of input types:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD))
: 0);
}
It helps to understand that the method signature for updateStagedInputTypeFlag is the following:
updateStagedInputTypeFlag([view], [flagsToUnset], [flagsToSet]);
Update 2: There are lot's of "input type" flags you can use, see a full list here. Feel free to try others - you might stumble upon one that works. You should be able to modify the code from my first update above.
if anyone has this problem, setting autoCorrect=false and keyboardType="visible-password" hides the suggestions in android
You can set the TextInput to Set autoCorrect to false.
You would have to write your own Android TextView wrapper, that sets the correct input type. See this stack overflow post for more information on the android part.
My solution was using keyboardType={'visible-password'} when the password is visible
<TextInput
onChangeText={onChangeText}
label={label}
autoCapitalize='none'
value={password}
secureTextEntry={isPasswordVisibile}
keyboardType={this.state.isPasswordVisibile ? undefined : 'visible-password'}
/>
Our fix/hack was to simply change the input`s type from text to email and back to text.
in my program I have 2 'screen', in the first there is a list and if I press an item I go to the second screen… and in the second screen there is a button to return in the first…
when I return in the fist I get this warning
WARN][Ext.Component#constructor] Registering a component with a id (`usernamelabel`)
which has already been used. Please ensure the existing
component has been destroyed (`Ext.Component#destroy()`.
in the controller i tried something like this:
itemUp: function (dataview, index, target, record, e, Opst ) {
Ext.Viewport.animateActiveItem({xtype: 'mytabpanel'},{ type: 'flip' );
var store = Ext.getStore('Customers');
store.clearFilter();
Ext.destroy(this.searchField);
Ext.destroy(this.clientsList);
}
but doesn't work.. how to destroy an entire 'screen'?
PS: if I run the program in iOS or android devices I see ever the same "theme"…
how to specialise the theme? (on my win phone 7.8 doens't works.. is normal?)
thanks a lot!!!
It's because you harcoded id: usernamelabel, so when you initiate it the second time, you'll get above warning message. You'll be safe if you use itemId
I am writitng request spec for my rails app with capybara. In my code I have something like:
%table
%tbody
%tr{"on_click" => "location.href='some_link'"}
%td="Some attribute"
%td="Some attribute"
%td="Some attribute"
%td="Some attribute"
This way I make the entire row clickable. I want to write a request spec with capybara for this feature but I don't know how. Can anyone help me on this ?
Thank you
May be you should first get to know the testing in rails. Check this out! http://railscasts.com/episodes/275-how-i-test it is really helpful. You can give your tr a class (say) .tr and do
page.find(:css, ".tr").click()
I hope this works, worked in my case!
I found this works without requiring a class:
page.find(:xpath, "//table/tbody/tr").click
I believe your row-click requires JavaScript, so you'll need to add :js => true to your test's header. Setting up testing with JavaScript is a challenge. I found these resources helpful:
ASCIIcast #257 Request Specs and Capybara - see info on database-cleaner
Capybara readme - see “Transactions and Database Setup"
Here is a more complete test example:
# Note that opening page by clicking on row requires JavaScript
describe "when user clicks on first row", :js => true do
let(:first_account_listed) { Account.order(:name).first }
before { page.find(:xpath, "//table/tbody/tr").click }
it { should have_selector('title', text: 'Account Details') }
end
In Capybara 3+ you can go with a more elegant way by using the :table_row selector and match against a td value like:
page.find(:table_row, ["Some attribute"]).click
If you have table headers defined you can also pass a Hash instead of an Array that will match the cell against its corresponding table header like this:
page.find(:table_row, { "Header" => "Cell value" }).click
To dive into how this actually works, here's a link to the latest Capybara selector definition: https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector/definition/table_row.rb