[QUESTION] How to handle focus?
fynn-lemburg opened this issue · 20 comments
Hi,
I have a question regarding the focus of the editor. I couldn't figure out how to handle it, especially how to request or unfocus it programmaticaly. I tried controller.setFocus() and controller.clearFocus() but both did not seem to work.
Another question: Is it possible to define the keyboard type ?
Controller unfocus should work with controller.clearFocus()... on my end it removes the cursor, removes the keyboard, and resets the height.
However, if you are trying to create an implementation where you can, for example, jump from a TextField to the editor to another TextField by pressing the enter key on the keyboard, this is not possible. Unfortunately this is a limitation of Flutter - technically controller.setFocus() is focusing the editor. You can see this because the onFocus callback fires. Flutter doesn't see this though, so the keyboard and cursor do not show. As a result you can't make a form style page where the FocusNode can jump between native components and webview components.
With time hopefully this can be sorted out but as of right now it is still an issue.
A quick search reveals this issue on flutter_inappwebview - pichillilorenzo/flutter_inappwebview#744 - unfortunately it was closed by OP without any further details...
yeah, I was quite frustrated with this too. In my case, I've a TextFormField and a HTML editor together in my widget. There are three issues I've seen so far,
- Tab button press doesn't jump to the html editor.
- The onscreen keyboard pops up on and off couple of times (in other words, editor focus is not stable).
- The editor doesn't take in physical keyboard input (can type only with the onscreen keyboard)
The onscreen keyboard pops up on and off couple of times (in other words, editor focus is not stable).
@anamak9 would you be able to provide device details and a video/reproducible example for the above?
The editor doesn't take in physical keyboard input (can type only with the onscreen keyboard)
Judging by this you are using the Simulator on macOS, this is a known issue with the simulator - the hardware keyboard doesn't work to type in any webview, not just this package. It works fine on a real iOS device or Safari afaik.
@tneotia I may not able to produce a video for now but why don't you try to create a widget just like the one I did and run it on an emulator and see yourself (I had used an android emulator)?
@anamak9 finally got a chance to test on an emulator. I can't reproduce your 2nd and 3rd issues at all on the master branch of the plugin, Flutter beta, and the example app. Focus seems stable and hardware keyboard works great.
Android.SR.-.html_editor_enhanced.mp4
Is it possible to define the keyboard type ?
Added in v2.2.0, thanks for the suggestion!
(Use HtmlEditorOptions > inputType to use this feature).
Is there any progress on resolving this problem?
I still have the same issue running the latest version of html_editor_enhanced: ^2.4.0+1
Here is the sample of my code. I have a TextField and BasicHtmlEditor which is a wrapper around your HtmlEditor widget.
final _htmlController = HtmlEditorController();
final _textFocusNode = FocusNode();
final _textController = TextEditingController();
bool _editAsHtml = false;
IconButton(
color: Theme.of(context).primaryColor,
icon: Icon(MdiIcons.formatFont /*formatTextVariantOutline*/),
onPressed: widget.chatGroup!.groupId == null || _isSending
? null
: () {
setState(() {
_editAsHtml = !_editAsHtml;
Future.delayed(const Duration(milliseconds: 100), () {
if (_editAsHtml) {
_textController.clear();
_textFocusNode.unfocus();
_htmlController.setFocus();
} else {
// _htmlController.clear();
_htmlController.clearFocus();
_textFocusNode.requestFocus();
}
});
});
},
),
Expanded(
child: _editAsHtml
? BasicHtmlEditor(
controller: _htmlController,
height: 120,
hint: 'Type your message here...',
)
: TextField(something here),
),
Unfortunately no, this is pretty much a Flutter limitation due to how it works with platform views (in this case webview).
Same here. It is quite common to have, let's say, a TextField for Subject and the Html Editor for the Body of the message. Because of this, it's not possible to correctly move focus from the TextField to the Html Editor. Any hint?
When I click menu list options, focus will land on the edit box, cause I can't choose. How do I solve this problem
Any update on this? setFocus function is not working so it is not possible to autofocus the editor which is a big issue I think...
Unfortunately no, this is still a Flutter limitation with platform views. I've messed with the setFocus on numerous occasions and I don't think that propagates outside the webview (ie it doesn't tell Flutter that an element in the webview is focused, and should open the keyboard)
@tneotia have you reported this to the flutter_inappwebview team? Have you tried to use another webview plugin instead of flutter_inappwebview?
@tneotia Sorry I see that you did try.
Seriously, this is what drives me nuts about Flutter. A group of good guys does something good and people, like us, start using it and the good guys give up. Flutter team doesn't care and we get left in a shit.
Anyway, have you tried to use another webview plugin instead of flutter_inappwebview?
All webview plugins have the same issues, and by far flutter_inappwebview is better than the rest so I chose it. Until Flutter team improves platform view functionality, nothing can be done here (and it is a P4 issue so not high priority at this time)
Just to let you know, a possible solution is to update the onFocus function in the editor like this. It works for the web, I did n t test for mobile:
onFocus: () {
// To fix the bug that leave the focus to another text field entering the editor, when we click on the editor
// we clear first the focus on other component, then we have to put the focus again in the editor
FocusScope.of(context).requestFocus(FocusNode());
controller.setFocus();
},
When popup a widget or drawer I cannot click any button which is on html_editor_enhanced.Is there any solutuion?
Yes I have also the problem that when I have a alertDialog that overlap the editor, the mouse still change to a cursor and when I click on my dialog the focus go to my editor that is behind it.
If you need to dismiss the keyboard try this:
var result = await _htmlController.editorController
?.evaluateJavascript(source: "document.activeElement.blur();");