icemanbsi / searchable_dropdown

MIT License
107 stars 164 forks source link

whenever i select the dropdown value in this code cursor(pointer) move to the upper textfield . How to solve this problem?? #47

Closed Robinp1011 closed 4 years ago

Robinp1011 commented 4 years ago

Column( children: [

            Padding(
              padding: const EdgeInsets.only(top: 14),
              child: new TextField(

                // maxLengthEnforced: true,
                keyboardType: TextInputType.multiline,
                controller: controller1,
                decoration: new InputDecoration(
                  // contentPadding: EdgeInsets.symmetric(vertical: 26,horizontal: 10),
                    border: OutlineInputBorder(),
                    hintText: "Add Task name Only",
                    labelText: "Add Task name only"
                ),
              ),
            ),
            new SizedBox(
                height:6
            ),

            Column(
              children: <Widget>[

                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    new Text("Select Product:", style: new TextStyle(fontSize: 12),),
                  ],
                ),

                Container(

                  height: 50,
                  width: MediaQuery.of(context).size.width,
                  decoration: ShapeDecoration(

                    shape: RoundedRectangleBorder(

                      side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.blue),
                      borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal:10.0),
                    child: StatefulBuilder(
                      //stream: null,
                        builder: (BuildContext context, StateSetter setState) {
                          /*  return  DropdownButton<String>(
                            //  hint: Text('Project'),
                              value:applicationDropDown,
                              isExpanded: true,

                              // style: Theme.of(context).textTheme.title,
                              //  icon: Icon(Icons.arrow_drop_down,color: Colors.lightBlue,),

                              onChanged: (String newValue) {
                                setState(() {
                                  applicationDropDown = newValue;
                                });

                              },
                              items: applicationList.cast<String>()

                                  .map<DropdownMenuItem<String>>((String value) {
                                return DropdownMenuItem<String>(
                                  value: value,
                                  child: Text(value),

                                );
                              })
                                  .toList()
                          );        */

                          return SearchableDropdown.single(
                            items: applicationList.cast<String>()

                                .map<DropdownMenuItem<String>>((String value) {
                              return DropdownMenuItem<String>(
                                value: value,
                                child: Text(value, ),

                              );
                            })
                                .toList(),
                            value: applicationDropDown,
                            hint: "Select one",
                            searchHint: "Select one",
                            onChanged: (value) {
                              setState(() {
                                applicationDropDown = value;
                              });
                            },
                            isExpanded: true,
                            // label: "Select Project",

                            selectedValueWidgetFn: (item) {
                              return Container(
                                  transform: Matrix4.translationValues(-10,0,0),
                                  alignment: Alignment.centerLeft,
                                  child: (Text(item.toString())));
                            },

                            // style: Theme.of(context).textTheme.title,
                            displayClearIcon: false,

                          );
                        }
                    ),
                  ),
                ),
              ],
            ),

            Padding(
              padding: const EdgeInsets.only(top:7.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Column(
                    //  mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Text("Select Customer:", style: new TextStyle(fontSize: 12),),

                      Container(

                        height: 50,
                        width: MediaQuery.of(context).size.width/2,
                        decoration: ShapeDecoration(

                          shape: RoundedRectangleBorder(

                            side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.blue),
                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal:10.0),
                          child: StatefulBuilder(
                            //stream: null,
                              builder: (BuildContext context, StateSetter setState) {
                                return SearchableDropdown.single(
                                  items: projectList.cast<String>()

                                      .map<DropdownMenuItem<String>>((String value) {
                                    return DropdownMenuItem<String>(
                                      value: value,
                                      child: Text(value, ),

                                    );
                                  })
                                      .toList(),
                                  value: projectDropDown,
                                  hint: "Select one",
                                  searchHint: "Select one",
                                  onChanged: (value) {
                                    setState(() {
                                      projectDropDown = value;
                                    });
                                  },
                                  isExpanded: true,
                                  // label: "Select Project",

                                  selectedValueWidgetFn: (item) {
                                    return Container(
                                        transform: Matrix4.translationValues(-10,0,0),
                                        alignment: Alignment.centerLeft,
                                        child: (Text(item.toString())));
                                  },

                                  // style: Theme.of(context).textTheme.title,
                                  displayClearIcon: false,

                                );
                              }
                          ),
                        ),
                      ),
                    ],

in this code whenever i select any dropdown value cursor move to the add task textfiled. Is there any way to solve this problem. SO that cursor do not move to the textfiled again and again.

will be thankful for your help

lcuis commented 4 years ago

Hello @Robinp1011 ,

I was able to compile and run with the following code:

Column(
    children: [

    Padding(
    padding: const EdgeInsets.only(top: 14),
    child: new TextField(

    // maxLengthEnforced: true,
    keyboardType: TextInputType.multiline,
//    controller: controller1,
    decoration: new InputDecoration(
    // contentPadding: EdgeInsets.symmetric(vertical: 26,horizontal: 10),
    border: OutlineInputBorder(),
    hintText: "Add Task name Only",
    labelText: "Add Task name only"
    ),
    ),
    ),
    new SizedBox(
    height:6
    ),

    Column(
    children: <Widget>[

    Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
    new Text("Select Product:", style: new TextStyle(fontSize: 12),),
    ],
    ),

    Container(

    height: 150,
//    width: MediaQuery.of(context).size.width,
    width:150,
    decoration: ShapeDecoration(

    shape: RoundedRectangleBorder(

    side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.blue),
    borderRadius: BorderRadius.all(Radius.circular(5.0)),
    ),
    ),
    child: Padding(
    padding: const EdgeInsets.symmetric(horizontal:10.0),
    child: StatefulBuilder(
    //stream: null,
    builder: (BuildContext context, StateSetter setState) {
    /*  return  DropdownButton<String>(
                            //  hint: Text('Project'),
                              value:applicationDropDown,
                              isExpanded: true,

                              // style: Theme.of(context).textTheme.title,
                              //  icon: Icon(Icons.arrow_drop_down,color: Colors.lightBlue,),

                              onChanged: (String newValue) {
                                setState(() {
                                  applicationDropDown = newValue;
                                });

                              },
                              items: applicationList.cast<String>()

                                  .map<DropdownMenuItem<String>>((String value) {
                                return DropdownMenuItem<String>(
                                  value: value,
                                  child: Text(value),

                                );
                              })
                                  .toList()
                          );        */

    return SearchableDropdown.single(
    items: items,
    value: selectedValue,
    hint: "Select one",
    searchHint: "Select one",
    onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
    },
    isExpanded: true,
    // label: "Select Project",

    selectedValueWidgetFn: (item) {
    return Container(
    transform: Matrix4.translationValues(-10,0,0),
    alignment: Alignment.centerLeft,
    child: (Text(item.toString())));
    },

    // style: Theme.of(context).textTheme.title,
    displayClearIcon: false,

    );
    }
    ),
    ),
    ),
    ],
    ),

    Padding(
    padding: const EdgeInsets.only(top:7.0),
    child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
    Column(
    //  mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    new Text("Select Customer:", style: new TextStyle(fontSize: 12),),

    Container(

    height: 150,
//    width: MediaQuery.of(context).size.width/2,
    width: 150,
    decoration: ShapeDecoration(

    shape: RoundedRectangleBorder(

    side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.blue),
    borderRadius: BorderRadius.all(Radius.circular(5.0)),
    ),
    ),
    child: Padding(
    padding: const EdgeInsets.symmetric(horizontal:10.0),
    child: StatefulBuilder(
    //stream: null,
    builder: (BuildContext context, StateSetter setState) {
    return SearchableDropdown.single(
    items: items,
    value: selectedValue,
    hint: "Select one",
    searchHint: "Select one",
    onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
    },
    isExpanded: true,
    // label: "Select Project",

    selectedValueWidgetFn: (item) {
    return Container(
    transform: Matrix4.translationValues(-10,0,0),
    alignment: Alignment.centerLeft,
    child: (Text(item.toString())));
    },

    // style: Theme.of(context).textTheme.title,
    displayClearIcon: false,

    );
    }
    ),
    ),
    ),])]))]
      )

As you can see, I had to change the width and height values. I also had to add some parentheses/brackets. But these don't seem to be related to your question.

You are talking about the TextField. Maybe your issue is related to the controller1? Indeed, I also had to comment that part as the definition was not in your example.

Sorry, for me, the TextField value doesn't change when I change searchable_dropdown selected value.

I wish I could help you but I believe that I am missing information related to controller1.

Robinp1011 commented 4 years ago

Sir my real issue is whenever i select the dropdown value keyboard is opening and cursor move to the textfiled i don't know why keyboard is appearing on the screen whenever i select dropdown value.

Please check it once

lcuis commented 4 years ago

Hi @Robinp1011 ,

Thanks for the explanation.

I think I understand the following steps to reproduce: 1) click on one of the 2 searchable_dropdown widgets (I'll take the product one). 2) select one item.

Expected behavior: The task name TextField is not focused and no keyboard is displayed.

Effective behavior: The task name TextField is focused and a keyboard is displayed.

Is this correct?

If so, in fact, I witness the expected behavior, no keyboard is displayed once the item is selected.

I tried this on a Samsung hardware and on an emulated device with the same results. Here is a video of the emulated device: issue47

So, to display the keyboard once the item is selected, I have to click on the TextField.

Robinp1011 commented 4 years ago

Sir once try by filling the textfield first then select dropdown then keyboard will appear again on the screen

https://drive.google.com/open?id=1ESorh9wFQfaejAqS2jL0L9vXJ4wFyd1H sir this is the link of the video of screen record of my phone.

You can clearly see in this video that whenever i am selecting the dropdown button after filling the textfiled keyboard is opening again.

Robinp1011 commented 4 years ago

Hi @Robinp1011 ,

Thanks for the explanation.

I think I understand the following steps to reproduce:

  1. click on one of the 2 searchable_dropdown widgets (I'll take the product one).
  2. select one item.

Expected behavior: The task name TextField is not focused and no keyboard is displayed.

Effective behavior: The task name TextField is focused and a keyboard is displayed.

Is this correct?

If so, in fact, I witness the expected behavior, no keyboard is displayed once the item is selected.

I tried this on a Samsung hardware and on an emulated device with the same results. Here is a video of the emulated device: issue47

So, to display the keyboard once the item is selected, I have to click on the TextField.

yes sir this is correct when you select the dropdown first then keyboard is not coming on the screen.

But when you select the dropdown after filling textfield then focus again come on textfield and keyboard appears on the screen

lcuis commented 4 years ago

Oh, ok, I understand.

Steps to reproduce:

1) tap on TextField 2) type name on keyboard 3) tap on SearchableDropdown 4) select item

Expected behavior: TextField unfocused and keyboard not displayed

Effective behavior: TextField focused and keyboard displayed

I confirm that I also witness this behavior on my device.

In that case, maybe, this link could help you? https://flutterigniter.com/dismiss-keyboard-form-lose-focus/

Robinp1011 commented 4 years ago

Oh, ok, I understand.

Steps to reproduce:

  1. tap on TextField
  2. type name on keyboard
  3. tap on SearchableDropdown
  4. select item

Expected behavior: TextField unfocused and keyboard not displayed

Effective behavior: TextField focused and keyboard displayed

I confirm that I also witness this behavior on my device.

In that case, maybe, this link could help you? https://flutterigniter.com/dismiss-keyboard-form-lose-focus/

Thanks sir now it is working perfect Thanks for your help

lcuis commented 4 years ago

You’re welcome @Robinp1011 ! I’m glad it works. Enjoy!

Octet83 commented 4 years ago

Hello @Robinp1011 ,

Could you write how did you managed this issue please ?

Robinp1011 commented 4 years ago

You can use another plugin with same functionality i. e. search choices . Its working is same as that of searchable dropdown and this error is not coming in that.

On Thu, 9 Jul 2020, 17:57 Yann Levy, notifications@github.com wrote:

Hello @Robinp1011 https://github.com/Robinp1011 ,

Could you write how did you managed this issue please ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/icemanbsi/searchable_dropdown/issues/47#issuecomment-656097444, or unsubscribe https://github.com/notifications/unsubscribe-auth/APGXAFE4YWXCLZKDIIPEWWTR2WZSFANCNFSM4MLGZ62Q .