Dropdown not working after deploy

[clus90]

Hi, I was working in local and worked perfectly, but I deployed my app to Firebase Hosting and the dropdown stopped working in all browsers. I have no idea what could be the problem.

Thanks in advance,

[lcuis]

Hello @clus90 ,

Thanks for reporting this issue.

Is there a way you could share with us a way to see how the problem occurs?

Is there for example a link to an app visible on the Firebase Hosting?

[clus90]

Hi @lcuis , I re-deployed it on another server just to see if anything different happened but no, same issue.

You can go here: http://167.99.152.44/#/admin/events

Click on "Add New" you will see a form, in that form I've implemented 3 searchable dropdowns. All of them work when running the app locally, but for some reason on the server is like the tap is never triggered.

[lcuis]

Hi @clus90 ,

Thanks for sharing your link!

I was able to access the list of events but when I click on "Add New" button, a grey overlay appears and that's it. I don't see any other UI element such as a form or any searchable_dropdown.

Something I noticed with the web implementations is that the menu mode doesn't seem to work as well as the dialog:
https://searchchoices.jod.li/

Also, I believe that the behavior can change depending on the server configuration and software. Do you have the same problems when running the web version directly from Android Studio?

Behavior also seems to depend on the web browser used. I tried Chrome and Opera with the same result.

[clus90]

Hi @lcuis , that grey screen is something I am trying to fix, it happen when somethings haven't load on the background. If you get that screen, just click BACK on your browser and then click again and you will see the pop up.

I tried the menu and the dialog both, and had the same issue, is like the Tap event is never triggered.

Thanks

[lcuis]

Hi @clus90 ,

Indeed, hitting the back button allowed me to witness what you mentioned: clicking on any of the 3 searchable_dropdown widgets does not open any dialog.

My hunch would be related to the server software and configuration.

To try to isolate the cause, could you please try the Chrome and Web Server launch options in Android Studio as shown below?

[clus90]

Locally both options (Web server and Chrome) work. The version you saw is deployed on Digital Ocean, on a VPS running Ubuntu. I don’t know Firebase’s server configs.

You might be able to replicate it on your end, deploying on Firebase is quite easy. I will keep trying to figure ir out and let you know of any developments

[lcuis]

Thanks for your tests, your investigations and for the additional information @clus90 .
I quickly checked the apache2 configuration for the Flutter web of https://searchchoices.jod.li/ and I see nothing special:

<IfModule mod_ssl.c>
<VirtualHost *:443>
        ServerName searchchoices.jod.li
        ServerAdmin [email protected]
        DocumentRoot /my/path/
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        SSLCertificateFile /my/keys/path/fullchain.pem
        SSLCertificateKeyFile /my/keys/path/privkey.pem
        ProxyRequests Off
</VirtualHost>
</IfModule>

Software versions are:

# apache2 -v
Server version: Apache/2.4.38 (Debian)
Server built:   2019-10-15T19:53:42

# lsb_release -a
No LSB modules are available.
Distributor ID: Debian
Description:    Debian GNU/Linux 10 (buster)
Release:        10
Codename:       buster

I tried deploying on Firebase and the result is the same as on the VPS hosting above:
https://fluttertest-576ea.web.app/

Then, the difference I see between your site and mine, is that I don't have any errors in the console while you have the following ones:

Though, I'm not convinced this could help resolve your issue.

Apart from this, it is a bit difficult to investigate this issue because the HTML code resulting from the Flutter web creation doesn't allow much inspection.

[clus90]

Hi @lcuis , thanks for your time. The only difference is that I show mine on a dialog. I am going to change theme to the body of the Scaffold like yours and hopefully it will fix the issue.

Thanks again

[lcuis]

Good idea, thanks for trying this.

[clus90]

Hi @lcuis , I tried removing it from the dialog but having the same issue:

Here is snipped of how I am creating the form, maybe you are able to see something that I might be missing:

SingleChildScrollView( child: Padding( padding: const EdgeInsets.symmetric(vertical: 20), child: Form( key: _formKey, child: Column( children: <Widget>[ SearchableDropdown.single( items: _businessList.map((bus) { return (DropdownMenuItem(child: Text(bus.name), value: bus)); }).toList(), value: _selectedBusiness, hint: "Select a business", searchHint: "Select a business", onChanged: (value) { print(value); setState(() { _selectedBusiness = value; }); }, dialogBox: false, isExpanded: true, menuConstraints: BoxConstraints.tight(Size.fromHeight(350)), validator: (value) { if (value == null) { return 'Please select a business'; } return null; }, ..... // Rest of the form ),],),),);

[clus90]

@lcuis should I use a ListView instead of a bunch of items on a column?

[lcuis]

Sorry to read that it didn't work.

Can you please try this?

dialogBox: true,

[lcuis]

Hello @clus90 ,

There was a bug on hosted web that prevented the opening of the selection in menu mode.

This has been fixed with PR #45 .
Note that this is not yet merged and not deployed to pub.dev but that's on the way.

[Prathik-Jain]

Hi @clus90 ,

ETA on when this will be fixed and #45 will be merged?
Thanks :)