score:1

Accepted answer

i have got the solution. using alertcontroller ionselect dropdown can be closed programmatically,

import { alertcontroller } from "@ionic/core";
.....

useeffect(() => {

    document.addeventlistener('ionbackbutton', (ev: any) => {
      ev.detail.register(1005, async (processnexthandler: any) => {
        console.log('handler d was called!');
        const alert = await alertcontroller.gettop();
        console.log(alert);
        if (alert) {
          alert.dismiss();
          return;
        }
        processnexthandler();
      });
    });
    return () => {
      console.log("use effect return");
    }
  }, [])

score:0

although pressing the hardware back button automatically closes the ionselect dropdown. if that doesn't work for you, here is a work-around using useref hook:

export const singleselection: react.fc = () => { 
    const [gender, setgender] = usestate<string>();
    const selectref = useref<any>(null);

    useeffect(() => {
     
      document.addeventlistener('ionbackbutton', (ev: any) => {
         ev.preventdefault(); // to prevent the closing of modal
         ev.detail.register(1000, async (processnexthandler: any) => {
           console.log('handler b was called!');
           selectref.current.close() // see here


           // here you can now close the modal

           processnexthandler();
         });
      });
      return () => {
        console.log("use effect return");
      }
   }, [])

    return (
         ...
         <ionselect ref={(ref: any) => selectref.current = ref} value={gender} placeholder="select one" onionchange={e => setgender(e.detail.value)}>
            <ionselectoption value="female">female</ionselectoption>
            <ionselectoption value="male">male</ionselectoption>
         </ionselect>
         ....
    
        );

};

Related Query

More Query from same tag