Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On smaller devices -- keyboard obscures suggestions and doesn't scroll #16

Closed
sjmcdowall opened this issue Nov 30, 2018 · 10 comments
Closed

Comments

@sjmcdowall
Copy link
Collaborator

sjmcdowall commented Nov 30, 2018

This is a great widget. Our issue is that on smaller devices (specifically for us a user has an iPhone SE) and the initial suggestions comes up -- but when they tap in the box and the keyboard pops up -- the bottom of the list is obscured by the keyboard and scrolling doesn't "work". Meaning, it doesn't actually scroll it scrolls then pops back ... probably because it's confused that the text isn't visible by the keyboard?

Any workaround to this?

Also -- the "Done" button on iOS removes the keyboard, but also the scroll list and everything else -- so that didn't help :(

This is rather important for our users.. hoping for some ideas @AbdulRahmanAlHamali

@AbdulRahmanAlHamali
Copy link
Owner

Hello @sjmcdowall , I apologize for taking so long to reply. I have been extremely overwhelmed in the past period, and now I am planning to get things back on track.

Regarding the issue, this is most definitely the first item on the list. I will try to find a solution for it within the week.

Thank you for reporting!

@KaYBlitZ
Copy link
Contributor

KaYBlitZ commented Jan 1, 2019

I seemed to have figured out what the problem is. The list doesn't scroll because the list is showing all the elements (going off the screen), so it doesn't need to scroll. If we limit the size of the list for the _overlayEntry, ie:

this._suggestionsBoxController._overlayEntry =
      OverlayEntry(builder: (context) {
      return Positioned(
        width: size.width,
        height: 300.0, // add this line
        child: CompositedTransformFollower(

we can force a height on the list. It will scroll now, but I haven't figured out a good way to determine the height yet. If the keyboard covers the bottom of the list, then we won't be able to see the last few elements.

@sjmcdowall
Copy link
Collaborator Author

sjmcdowall commented Jan 2, 2019 via email

@AbdulRahmanAlHamali
Copy link
Owner

@KaYBlitZ I have enabled constraining the height:

suggestionsBoxDecoration: SuggestionsBoxDecoration(
  constraints: BoxConstraints(
    maxHeight: 200.0
  )
),

But as @sjmcdowall indicated this does not solve the problem for all scenarios, and it is a bit tricky to get right. I apologize that it is taking longer than promised.

@KaYBlitZ
Copy link
Contributor

KaYBlitZ commented Jan 2, 2019

Hi Abdul. I submitted a pull request that I think will fix this issue. Please check it out when you have time since I know you are very busy.

@AbdulRahmanAlHamali
Copy link
Owner

@KaYBlitZ Thank you very much! I really appreciate it!

I will check it out today around lunch time and will get back to you

Have a great day!

@sccrgoalie1
Copy link

sccrgoalie1 commented Jan 7, 2019

I just updated to this release (0.5.0) and am getting an error when the keyboard is shown on Android and it covers the suggestions box. Is there something else we need to configure with this release?

The following assertion was thrown building _SuggestionsList<dynamic>(dirty, state: I/flutter (22300): _SuggestionsListState<dynamic>#355ea(ticker inactive)): I/flutter (22300): BoxConstraints has non-normalized height constraints. I/flutter (22300): The offending constraints were: I/flutter (22300): BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=-102.1; NOT NORMALIZED) I/flutter (22300): I/flutter (22300): When the exception was thrown, this was the stack: I/flutter (22300): #0 BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:504:9) I/flutter (22300): #1 BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:540:19) I/flutter (22300): #2 BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:551:6) I/flutter (22300): #3 new ConstrainedBox (package:flutter/src/widgets/basic.dart:1926:27) I/flutter (22300): #4 _SuggestionsListState.build (package:flutter_typeahead/flutter_typeahead.dart:950:14) I/flutter (22300): #5 StatefulElement.build (package:flutter/src/widgets/framework.dart:3809:27) I/flutter (22300): #6 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15) I/flutter (22300): #7 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) I/flutter (22300): #8 StatefulElement.update (package:flutter/src/widgets/framework.dart:3878:5) I/flutter (22300): #9 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) I/flutter (22300): #10 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4867:14) I/flutter (22300): #11 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) I/flutter (22300): #12 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16) I/flutter (22300): #13 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) I/flutter (22300): #14 ProxyElement.update (package:flutter/src/widgets/framework.dart:3990:5) I/flutter (22300): #15 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) I/flutter (22300): #16 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16) I/flutter (22300): #17 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) I/flutter (22300): #18 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2286:33) I/flutter (22300): #19 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:685:20) I/flutter (22300): #20 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5) I/flutter (22300): #21 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) I/flutter (22300): #22 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) I/flutter (22300): #23 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5) I/flutter (22300): #24 _invoke (dart:ui/hooks.dart:159:13) I/flutter (22300): #25 _drawFrame (dart:ui/hooks.dart:148:3) I/flutter (22300):

@KaYBlitZ
Copy link
Contributor

KaYBlitZ commented Jan 7, 2019

No. It should just work. Is the keyboard covering just the suggestions box or the text box as well?

Looks like the keyboard is covering the text box based on the crash log calculating a negative height.

I will take a look later if you can give more details on your setup. Might just need a check for negative height.

@sccrgoalie1
Copy link

Yes you are correct. When the keyboard launches it is covering the text box.

@KaYBlitZ
Copy link
Contributor

KaYBlitZ commented Jan 7, 2019

I was able to replicate the problem by putting a text box at the very bottom of the screen.
To fix it, you can set the maxHeight to a default positive value if it was either 0 or negative. It doesn't show the error, but the user will still be unable to see what he is typing or the suggestions list.

I created a pull request for the quick fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants