Imagine the following scenario:
Application has a TextFormField where the user inputs a big string.
The form field will scroll automatically to its right as the user types in, which is expected. So far so good.
The TextFormField also has a FocusNode that will be dismissed when the user completes edition, thus, calling the onFieldSubmitted(), and requesting the new focus to other field, something like:
onFieldSubmitted: (_) => FocusScope.of(context).requestFocus(_someOtherNode);
Now, I want the loosing focus TextFormField to scroll back to its begin instead of leaving the cursor at the end, makes sense right? It turns out that it is actually possible by changing the value of its TextEditingController
_firsFieldController.value = TextEditingValue(
text: _firstFieldController.text,
selection: TextSelection.collapsed(offset: 0),
composing: TextRange.collapsed(0)));
This all makes sense and work, until a point. Here's when the problem starts. Changing the TextEditingController value will trigger a ValueNotifier to all its listeners, but since this is a synchronous process, if I immediately request focus to a new node, the cursor won't be updated to its begin because it's actually required to have the focus on the TextFormField that is animating back.
TL;DR
This won't work because the focus to the new node will be set before setting the cursor on the begin of the first
onFieldSubmitted: (_) {
_firstFieldController.value = TextEditingValue(
text: _firstFieldController.text,
selection: TextSelection.collapsed(offset: 0),
composing: TextRange.collapsed(0));
FocusScope.of(context).requestFocus(_passwordFocusNode);
}
Adding a little delay before requesting the new focus to let the listeners rebuild will make it work, but feels completely wrong
Future.delayed(Duration(milliseconds: 200))
.then((_) => FocusScope.of(context).requestFocus(_newFocusNode));
Related
Good afternoon,
I'm doing a project in delphi that uses editmask. I'm using the phone mask.
When clicking on edit to write the phone number, it goes to the last field on the right, so it is necessary to go back with the backspace to the beginning of the edit on the left.
i would like to find a way that when the user typed the number in the last field on the right, it was passed to the left. So on until you complete the phone field. It would be possible?
Using an example of what it would look like:
I couldn't think of a way to do it
The component is called TMaskEdit.
Just like anything that bases on TEdit putting the focus onto the control will by default put the text cursor at the end of its content
via keyboard, should .AutoSelect be FALSE and
via mouse if clicking behind any text (by default the text is aligned to the left).
You should have experienced this with the other components already. If you want the text cursor to always be at a certain position upon focusing the control, then do that in such an event handler:
for keyboard use OnEnter:
procedure TForm1.MaskEdit1Enter(Sender: TObject);
begin
(Sender as TMaskEdit).SelStart:= 1; // Second position
end;
and for mouse use OnClick with the same code.
It even works unbound to how the property .AutoSelect is set.
Using Backspace is the worst choice input wise, as it always deletes potential content and needs to be pressed several times to go to the first position. Why not using the Home key instead?
I have this code
setContent {
val items = mutableListOf<Int>().apply {
(1..100).forEach { add(it) }
}
LazyColumn {
items(items) { item ->
TextField("$item", {})
}
}
}
With android:windowSoftInputMode="adjustResize" in my AndroidManifest.xml.
If I click on a TextField at the top of the list, I can enter text fine.
If I click on a TextField near the bottom of the screen, the keyboard appears momentarily, then disappears quickly after, and prevents me from entering text.
How can I enter text when the TextField is at the bottom of the screen? Thanks!
Your keyboard disappears after having appeared for a brief, shiny moment. Here's the reason:
You tap the TextField, it calls it's built-in focus requestor, and requests the focus from the OS by calling appropriate (or inappropriate, who's to say) internal methods, as a result of which, the keyboard pops out (again, built-in mechanism.) and you can type all the more you want... AS LONG AS THE FIELD IS VISIBLE; or in Compose terms, long as the Composable holding the requestor, is in composition.
It should be clear, that once the Composable that owns the focus requestor goes off the screen, it is destroyed (well not every time, there are only certain specific cases when it is destroyed..., but yours is one of them), and when the Composable is destroyed, the focus requestor is destroyed. No focus requestor, no focus owner - the keyboard vanishes.
Now this is really important because you are using a LazyColumn, a lazy Composable, infamous for its merciless slaughtering of the Composables that are no longer visible to the user. HENCE, as long as it is the top (or other "visible") textfield that is in concern, it stays and works as expected. However, the bottom textfield, as the keyboard pops up, goes so much out of the visible bounds, that it gets slaughtered (recycled is the technical term, but what fun is that?), taking away the purpose of the keyboard.
Now, the lazy column, like any criminal, left a clue behind, and didn't notice it, which lead us to catch him red-handed. It is quite interesting, really, to see the column in action.
Now, workarounds include using a column, instead of a lazy column; creating your own lazy column using a custom lazy Composable, and manually handling the heap size for the Composable so the final field doesn't go out of composition.
That's it, you're cured.
Just leaving another answer, since OP didn't verify other purpose of him specifying adjustResize,if whether removing or changing it will be fine, but another solution aside from the mentioned comment about different API version is specifying adjustPan, which worked in my case, either
via AndroidManifest
android:windowSoftInputMode="adjustPan"
or programmatically
window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
Same code base but with adjustPan
This issue is fixed in the current alpha version 1.4.0-alpha05
https://issuetracker.google.com/issues/179203700
I have a list of ListTile and whenever I tapped them, a new page will appear. Currently, the new page will slide up (when appearing) and slide down (when removed). I wanted to change the transition animation to Fade.
I've read the solution of that in here then I edited the code from the link and here is the result.
class MyCustomRoute<T> extends MaterialPageRoute<T> {
MyCustomRoute({ WidgetBuilder builder})
: super(builder: builder);
#override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
if (settings.isInitialRoute)
return child;
return new FadeTransition(opacity: animation, child: child);
}
}
The only difference from the link's solution to mine was that I never supplied the "settings" variable to the MaterialPageRoute class.
And here is the part of the code where I've used the Navigator.push:
new ListTile(
onTap: (){
Navigator.push(context, new MyCustomRoute(builder: (context) => new SecondPage("someTitle", "someDescription") ));
},
//The rest of the code goes here
I've tried to run this code and I've never expected that this will run smoothly since I never provided the settings variable to the MaterialPageRoute widget but it ran perfectly.
My question is, is this the right way to do it? or
Should I provide settings for the MaterialPageRoute class?
And also since I didn't provide a settings variable for the MaterialPageRoute class, where did it get its settings? In this part of the code:
if (settings.isInitialRoute)
return child;
I would appreciate any enlightment. Thanks in advance.
The settings are only meant for two things - specifying the name, and letting the route know whether it's the first page to be opened.
The isInitialRoute simply tells the route whether it's the first page to be opened; this is important because you don't want a slide up animation on the very first page.
Since it seems your Custom Route is really only used after the first page, you don't need to worry about this. So you're probably fine ignoring the settings, unless you start to use the page as your first page (and even then, fading in might not be the worst thing).
I'm writing a slider style navigation in React Native, where you slide away the topmost item in a pile of cards and it (should) move to the bottom of the pile.
However, since there is no zIndex in React Native, only the order of elements, I'm having a hard time actually moving it to the back.
Given a collection of elements in {this.props.children}, how can I take the topmost element, move it to the back and re-render the component with the new order?
I have tried moving the children to the state and doing things like this:
this.setState({
children: this.state.children.push(this.state.children.shift())
})
But I've had no success. state.children is set to undefined in this case.
Is there a right way to rearrange elements since there is no zIndex?
Array.prototype.push() is an in-place method, which updates the array and does not return anything.
You can just call push() and this.setState({ children: this.state.children }). Instead of setState, you can also use this.forceUpdate() since the reference in the state doesn't really change.
I have several TextField's inside a window along with a Button, e.g. aButton.
The TextField's, Button, and window all have setImmediate(True).
When a TextField loses focus some validation code is executed and if it fails it calls:
aButton.setEnabled(False);
When incorrect data is entered into one TextField and then focus is lost the debugger shows that aButton.setEnabled(False) is called but aButton still looks enabled.
Two possible things can happen from here:
1.) If one modifies data in another TextField and exits that field (loses focus), the validation can be successful or not for that field but the system knows to call aButton.setEnabled(False) as the previous TextField is still invalid. This time though aButton is visually disabled.
2.) If one clicks on aButton which is visually enabled it produces this warning then visually becomes disabled:
Warning: Ignoring variable change for disabled component < class 'ui.button.Button'>, caption=OK
Currently using Vaadin 6.7.3
Are there any known work arounds to force aButton to visually become disabled immediately (force the client to update) after manually setting it to be disabled?
Sadly I have only Vaadin 7 at my disposal right now, but I checked this anyway. It works as you wanted it to work and I have to jump to the conclusion that this should be the same in Vaadin 6.7.3. This part is not really different in Vaadin7... Have you tried this feature in an isolated code (only a textbox and the button)?
VerticalLayout vlTestContent = new VerticalLayout();
final Button butChangeMe = new Button("Enabled");
final TextField tf = new TextField("Blur", "default value");
tf.addBlurListener(new BlurListener() {
private static final long serialVersionUID = 5544993392287938660L;
#Override
public void blur(BlurEvent event) {
butChangeMe.setCaption("Disabled");
butChangeMe.setEnabled(false);
}
});
Button but = new Button("Change button", new ClickListener() {
private static final long serialVersionUID = -2235317499126190105L;
#Override
public void buttonClick(ClickEvent event) {
butChangeMe.setCaption("Enabled");
butChangeMe.setEnabled(true);
}
});
vlTestContent.addComponent(butChangeMe);
vlTestContent.addComponent(tf);
vlTestContent.addComponent(but);
(The second button is just for fun)
button.setVisible(false) will always work. You need to be careful to not fire up a another event on the focus lost event that ends up setting the visibility of the button to true.
You can request a repaint of a component or the whole window, but the whole point of the framework is that you will never need to do that, because visually modified components will automatically repaint on each request.
Just to be curious, do you let your request to finish before trying to see if the browser updates? Or you look at your browser right after you pass the setVisible() line in your debugger ?
I think that your point nr 2 happens because you clicked on the button, and what happens in this order is: 1st your focus lost event runs (which probably disables your button), 2nd button click runs and somehow a repaint is requested for that button because a state change happened in the button but a repaint show the warning that it won't do anything with it because it is disabled (was just disable by the focus lost event)
As a side note. I think this UI won't make for a good user experience, it should be the other way arround, if a validation is ok, then show the button (or better, always show the button, but enable/disable instead) But it depends...