1

I am using a searchable dropdown list to input values into a .net maui android app. The dropdown works but when the selection is made it is not entered into the input field. The issue seems to be sporadic sometimes working when the page is first loaded. The code works great with the Windows Machine target. I am not using an editform model with this page. Built with Visual Studio 22 Version 17.4.4 and.net 6.0. Running on Android 10 & 11.

<div class="panel panel-default">
        <div class="panel-body ">
            <div class="container-fluid">
                <table class="table dt-responsive" id="header">
                    <tr>
                        <th>From Code</th>
                        <td><input type="search" list="loclist" value="@transferOrderHeader.Transfer_from_Code" @onchange="UpdateFrom" disabled=@isDisabled /></td>

                        <th>To Code</th>
                        <td><input type="search" list="loclist" value="@transferOrderHeader.Transfer_to_Code" @onchange="UpdateTo" disabled=@isDisabled /></td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <datalist class="col-4" id="loclist">
        @foreach (var loc in datamodel.locations)
        {
            <option value="@loc.Code">@loc.Address.Name</option>
        }
    </datalist>

I tried using inputselect, but it would not work with what I was trying to do, searchable dropdown. I tried using @bind instead of value, tried deleting the onchange and disabled tags with no effect. Any input would be greatly appreciated.

RollinB
  • 11
  • 2
  • Just tested on android 9 and 12 and it was working. Maybe you have another element with the same id "loclist" or @transferOrderHeader.Transfer_to_Code is overidded somewhere else ? Did you try making a very simple exemple from scratch to check if you still have the problem ? – Poulpynator Feb 24 '23 at 15:55
  • I tried again from scratch with only input lines. Tried several different scenarios. Still didn't work. Strange thing is that if I only have one input on the page it works fine but when I add the second input it stops working. I haven't tried .net 7 yet so that's next. – RollinB Feb 26 '23 at 00:36
  • 1
    I can't reproduce the issue based on your code snippet, could you please create a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) via github repo link? – Alexandar May - MSFT Feb 27 '23 at 08:10
  • Here is a minimal exemple for you : https://codeshare.io/yo0Z39 (working on .net 6), try it in a new project if it works that means the problem is coming from somewhere else in your project – Poulpynator Feb 27 '23 at 08:18
  • 1
    I uploaded a demo to github, https://github.com/bartbrock/MauiDropdownTest. – RollinB Feb 27 '23 at 20:14

1 Answers1

0

You can fix the issue by wrapping up the <input> </input> with <form> </form> element like below:

<div class="p-5"> 

    <button @onclick="Change">Test</button>

    <form>  
        <input type="search" list="brow" value="@ValueFrom.TestProp" @onchange="HandleChangeFrom">
    </form>

   
    <form>
        <input type="search" list="brow" value="@ValueTo.TestProp" @onchange="HandleChangeTo">
    </form>
  
    <datalist id="brow">

        @foreach (var el in Liste)

        {

            <option value="@el" />

        }

    </datalist>

</div>
Alexandar May - MSFT
  • 6,536
  • 1
  • 8
  • 15
  • I wrapped the inputs in form elements and It's still not working for me. I also tried the example given by @Poulpynator with no luck. Can you tell me the versions of VS and .net you're using. – RollinB Feb 28 '23 at 14:26
  • @RollinB My VS is Microsoft Visual Studio Community `17.4.2`. It works on Android 12. – Alexandar May - MSFT Mar 01 '23 at 02:36
  • I have not heard from you for a while. Please let me know if there is anything that I can help here. We can work together to figure it out. – Alexandar May - MSFT May 30 '23 at 09:15