Closed
Description
I am using this great idea http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680 in order to display modals.
In order to display them, I have this code:
const ModalRoot = ({ list } : ModalRootPropTypes) : any => {
if (list.size === 0) {
return null;
}
return (
<div>
{
list.map(({ type, props }, index) => {
const Component = getComponent(type);
return (
<Component key={index} {...props} />
);
})
}
</div>
);
};
The getComponent
is like this:
const DeleteArticle = (
<Modal>
...
</Modal>
);
const MODAL_DELETE_ARTICLE = "MODAL_DELETE_ARTICLE";
const getComponent = (type : ModalActionType) : any => {
switch (type) {
case MODAL_DELETE_ARTICLE:
return DeleteArticle;
....
So, essentially, for 2 modals, these pieces of code generates this view:
The HTML code is:
Which is very good, correct and right. But:
Now, when I hit ESC
, the second modal hides (which is good). Then, if I press again ESC, nothing happens. That's because the Modal 1
is not logger focused.
If I click on it and hit ECS
it is closed.
My question is:
Can I somehow focus the next modal when one is closed? (Focus Modal 1
when Modal 2
is closed)