diff --git a/packages/app-desktop/gui/PromptDialog.tsx b/packages/app-desktop/gui/PromptDialog.tsx index db626e8563..007829487d 100644 --- a/packages/app-desktop/gui/PromptDialog.tsx +++ b/packages/app-desktop/gui/PromptDialog.tsx @@ -26,11 +26,15 @@ export default class PromptDialog extends React.Component { private focusInput_: boolean; private styles_: any; private styleKey_: string; + private menuIsOpened_: boolean = false; public constructor(props: Props) { super(props); this.answerInput_ = React.createRef(); + + this.select_menuOpen = this.select_menuOpen.bind(this); + this.select_menuClose = this.select_menuClose.bind(this); } public UNSAFE_componentWillMount() { @@ -39,6 +43,7 @@ export default class PromptDialog extends React.Component { answer: this.props.defaultValue ? this.props.defaultValue : '', }); this.focusInput_ = true; + this.menuIsOpened_ = false; } public UNSAFE_componentWillReceiveProps(newProps: Props) { @@ -52,6 +57,14 @@ export default class PromptDialog extends React.Component { } } + private select_menuOpen() { + this.menuIsOpened_ = true; + } + + private select_menuClose() { + this.menuIsOpened_ = false; + } + public componentDidUpdate() { if (this.focusInput_ && this.answerInput_.current) this.answerInput_.current.focus(); this.focusInput_ = false; @@ -224,16 +237,14 @@ export default class PromptDialog extends React.Component { const onKeyDown = (event: any) => { if (event.key === 'Enter') { - if (this.props.inputType === 'tags' || this.props.inputType === 'dropdown') { + // If the dropdown is open, we don't close the dialog - instead + // the currently item will be selcted. If it is closed however + // we confirm the dialog. + if ((this.props.inputType === 'tags' || this.props.inputType === 'dropdown') && this.menuIsOpened_) { // Do nothing } else { onClose(true); } - - // } else if (this.answerInput_.current && !this.answerInput_.current.state.menuIsOpen) { - // // The menu will be open if the user is selecting a new item - // onClose(true); - // } } else if (event.key === 'Escape') { onClose(false); } @@ -246,9 +257,9 @@ export default class PromptDialog extends React.Component { if (this.props.inputType === 'datetime') { inputComp = onDateTimeChange(momentObject)} />; } else if (this.props.inputType === 'tags') { - inputComp = onKeyDown(event)} />; + inputComp = onKeyDown(event)} />; } else if (this.props.inputType === 'dropdown') { - inputComp = onKeyDown(event)} />; } else { inputComp = onChange(event)} onKeyDown={event => onKeyDown(event)} />; }