Bug in iphone

[talkjs]

Bug in iphone

[eteeselink]

Hi there! Thanks for your report. We're looking into it right now.

We're not been able to reproduce this bug just yet. Could you share some of your code, maybe? Eg the widget tree that surrounds your TalkJS ChatBox(...) call?

If there's private stuff in there that you prefer not to share in a GitHub issue, consider opening a chat in the popup on https://talkjs.com and refer to this issue. Thanks!

[tarunkhatri]

Hi @eteeselink ,

here is the code

`class ChatPage extends StatefulWidget {
final String conversationId;

const ChatPage({
Key? key,
required this.conversationId,
}) : super(key: key);

@OverRide
_ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State {
final TalkJsHelper _talkJsHelper = TalkJsHelper();

@OverRide
void initState() {
_talkJsHelper.createConversationRoom(widget.conversationId);
super.initState();
}

@OverRide
void dispose() {
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: ChatBox(
session: _talkJsHelper.session!,
conversation: _talkJsHelper.conversation!,
),
),
);
}
}`

This widget is a child widget of a simple SizedBox with dynamic height

ValueListenableBuilder( valueListenable: _isChatOpen.valueNotifier, builder: (context, dynamic value, child) { return SizedBox( height: value ? MediaQuery.of(context).size.height * 0.36 :1.0, child: ChatPage(conversationId: widget.conversationId!) ); })

[vickz84259]

Hey. I'm Victor, a developer at TalkJS. We still can't seem to be able to reproduce the bug. Here's the setup I've tried running with:

Builder(builder: (BuildContext context) {
  return SizedBox(height: MediaQuery.of(context).size.height * 0.36,
    child: SafeArea(
        child: Scaffold(
          body: ChatBox(
            session: session,
            conversation: conversation,
          ),
        )
    ));
},)

I have also tried with the height of the SizedBox set to 1.0. This was tested on a device running iOS 15.2.

Internally, the html passed to the WebView has the body and the talkjs-container set to have a width and height of 100%. So that rules out the issue being inside the WebView. Run the example on Android Studio then use Flutter Inspector to get a clear picture of the Widgets that could be surrounding the WebView and their properties. Do share your results with us so that we can help get to the bottom of this.

Below is a recording of how the above code I've posted runs on my device.

RPReplay_Final1653557682.MP4

[tarunkhatri]

Hi @vickz84259 ,
Thanks for checking the issue, i have checked the ChatBox widget in a separate class it works fine but when Chatbox have particular height and keyboard is open then issue occurs.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(child: Container(color: Colors.blue,),),
          SizedBox(
            height: 300,
            child: ChatBox(
              session: _talkJsHelper.session!,
              conversation: _talkJsHelper.conversation!,
              showChatHeader: false,
            ),
          ),
        ],
      ),
    );
  }

can you please try above code and open keyboard then drag the TextField to upper direction.
And it seems that issue is with keyboard_actions library which is showing done button above keyboard.

[TZDiniz]

Hi there,
Thanks for the message.
Just so you know, we are checking what you mentioned and will get back to you as soon as possible.
Thanks,
Thiago

[vsarode]

Hi @vickz84259 @TZDiniz any luck with this ?

[TZDiniz]

@vsarode
Thanks for the follow-up!
My colleague Victor is out of the office today, but he will be back tomorrow.
I'll make sure to ask him to update you on his findings.
Cheers,
Thiago

[vickz84259]

Hey, sorry for the late reply. So I still can't reproduce the issue even with the code snippet you gave. Below is the result on my end when tested on iOS 15.5:

RPReplay_Final1654275117.MP4

Another thing to mention is that the Done button is part of the Webkit WebView. However it is looking more and more likely that the issue isn't with the TalkJS Flutter SDK. Could you share with me the device model and iOS version you are testing on?

[vsarode]

Hi @vickz84259 ,
We really appreciate your quick reply on this. Can we do a half and hour meeting to resolve this issue? I think that will be very effective to conclude this problem. We can try every solution togather. Please let me know your early availability.

[vickz84259]

Hey, I feel that until my team and I is able to reliably reproduce the issue it is going to be hard to diagnose and come up with solutions in a half an hour call. I would prefer to be able to reproduce the issue, dig deep and analyse what is going wrong, then have the call where we explain our findings and provide you with possible solutions and their drawbacks.

I would like if you could send a sample Flutter project with the bare minimum necessary to reproduce the issue on your end. Then we'll run it on our end and try and reproduce it. Don't forget to also share what version of iOS you are running. You can share the archived project file here or through our livesupport

[tarunkhatri]

Hi @vickz84259 ,
We have made a brand new flutter project and tried to code from scratch and run. But unfortunately we are facing same issue(When keyboard is open whole layout can be dragged to upper side).
https://github.com/tarunkhatri/talkjs_demo.git

here is the git link for the same.
We are using flutter 2.10.1 version and talkjs_flutter 0.2.1 version.
We have checked in ios 15.0, 15.4 and 15.5 version in simulator.
Here is the video made with above project in simulator.
Please let us know if you need any specific detail from our side.

Untitled.mp4

[vickz84259]

Thank you so much for this. Let me run it on my end then I'll get back to you with my findings.

[vsarode]

Hi @vickz84259 ,
Any update on this ? Could we please take this bit faster as we have this bug in production?

[vickz84259]

Hey, I was finally able to reproduce the issue. We are exploring different solutions and I'll get back to you with a report on what was wrong and what will help fix it.

[vickz84259]

I have identified that this issue is purely a Flutter issue and not in any way caused by the TalkJS SDK. As shown in the image below, the height of the SizedBox widget is unconstrainted and this is the cause of the issue. Giving it a flex value constraints the Widget and fixes the issue. I would advice rather than using Expanded for the container above, you use Flexible so that you can set the flex values for the top container.

I shall be closing this issue as it is not related to the TalkJS SDK.