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>
....
);
};
Source: stackoverflow.com
Related Query
- Ionic 5 : How to close ion-select programmatically
- how to clear and select items programmatically
- How does one programmatically 'open' a Material-UI Select field?
- Ant design - How do i auto close select ("tags" or "multiple" mode) dropdown after each selection?
- React, how to programmatically select text on component click
- How to select the rows of a material table programmatically on onclick event of button -React js
- How to programmatically close the Material-Ui DropDownMenu
- ReactJS how to close select dropdown on state change
- Editing CSS shadow part of an ionic select text (color) without affecting other instance of ion select
- How to programmatically leave an Ant Design select on enter click?
- How to create a input autosuggest or select option search using ionic react?
- How to close bootstrap modal programmatically in react js
- How do you programmatically update query params in react-router?
- How to select all text in input with Reactjs, when it focused?
- How to programmatically clear/reset React-Select?
- How to allow input type=file to select the same file in react component
- How to select element text with react+enzyme
- how react programmatically focus input
- How to use an array as option for react select component
- How to set default value in material-UI select box in react?
- How to get select element's value in react-bootstrap?
- How to programmatically fill input elements built with React?
- How to use MUI Select with react-hook-form?
- How to add close icon in Material UI Dialog Header top right corner
- How do I change the dropdown icon in material-ui select field?
- How to close the modal in react native
- React Bootstrap - How to manually close OverlayTrigger
- How to close a React Navigation modal with multiple screens in it
- How can I add an icon to Material UI Select options?
- redux-saga: How to create multiple calls/side-effects programmatically for yield?
More Query from same tag
- How to type compound components with ref forwarding
- Best place in project to put a file with polyfill for cross-browser JavaScript support
- fetch api makes get request instead of post
- Configuring React-native with React-native-ble-plx
- onClick function not calling a method
- Creating li tags from an array using ReactJS
- Simplest test for react-router's Link with @testing-library/react
- How do I delete a list item that has been given a unique id when created, in React + Firebase?
- Create common style classes for JSS in material-ui
- Cannot read property 'params' of undefined - cannot get product id
- How to use a ReactJS Component with Clojurescipt/Reagent
- Dispatch an action from container
- Loading dynamic NavItem from API doesn't work
- Unable to set `isSubmitting` with Formik
- ReactJs + Redux : how to do blockUI easy just like jQuery BlockUi?
- React-notification-system - trigger notification on JSON input
- How to get the status of a promise from redux?
- Array items sorting in javascript
- Selecting/Manipulating a modal after rendering
- Requesting an explanation for the concept of "Binding event handlers to class instance" in React
- Expo QR code not showing for a React Native App
- How to traverse and render nested HTML from an materialized path array which represents nested tree?
- How do I use spread operator in useEffect without infinite loop?
- State value keeps reverting back
- Change Nextprops in componentWillReceiveProps
- Gatsby keeps complaining Cannot query field "fields" on type "MarkdownRemark" when I have allMarkdownRemark
- How to remove the end of the x-axis in d3.js
- New to React, Increment/Decrement in shopping cart
- Stop page reloads after onClick() event - react
- Material UI Select Component with database data