diff --git a/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx b/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx index 76959fea73..1092587f3d 100644 --- a/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx +++ b/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx @@ -235,6 +235,7 @@ class RespAreaToolbar extends React.Component { onDone = (val) => { const { choices, node, editor, onAddChoice, onToolbarDone } = this.props; + const { editedChoiceIndex } = this.state; const onlyText = createElementFromHTML(val).textContent.trim(); @@ -282,11 +283,17 @@ class RespAreaToolbar extends React.Component { onKeyDown = (event) => { if (event.key === 'Enter') { - this.preventDone = false; - this.onAddChoice(); + const html = event.target?.innerHTML || ''; + + this.onDone(html); + this.preventDone = true; + this.focusInput(); + // Cancelling event - return false; + return true; } + + return false; }; onBlur = () => { diff --git a/packages/inline-dropdown/configure/src/main.jsx b/packages/inline-dropdown/configure/src/main.jsx index d0f7437b7f..58f66a1106 100644 --- a/packages/inline-dropdown/configure/src/main.jsx +++ b/packages/inline-dropdown/configure/src/main.jsx @@ -222,23 +222,12 @@ export class Main extends React.Component { }); if (shouldWarn) { - this.setState({ - warning: { - open: true, - text: 'Response areas with under 2 options or with no correct answers will be discarded.', - onClose: () => { - this.setState({ warning: { open: false } }); - }, - onConfirm: () => { - this.setState({ warning: { open: false } }, () => - this.onModelChange({ - choices: cloneDeep(newRespAreaChoices), - slateMarkup: domMarkup.innerHTML, - }), - ); - }, - }, - }); + this.onCheck(() => + this.onModelChange({ + choices: cloneDeep(newRespAreaChoices), + slateMarkup: domMarkup.innerHTML, + }), + ); } else { this.onModelChange({ choices: cloneDeep(newRespAreaChoices), @@ -251,11 +240,11 @@ export class Main extends React.Component { const { respAreaChoices } = this.state; const { maxResponseAreaChoices } = this.props.configuration; - if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) { + const showWarning = (message) => this.setState({ warning: { open: true, - text: `There are only ${maxResponseAreaChoices} answers allowed per choice.`, + text: message, onClose: undefined, onConfirm: () => { this.setState({ warning: { open: false } }); @@ -263,6 +252,8 @@ export class Main extends React.Component { }, }); + if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) { + showWarning(`There are only ${maxResponseAreaChoices} answers allowed per choice.`); return; } @@ -270,20 +261,11 @@ export class Main extends React.Component { respAreaChoices[index] = []; } + + // check for duplicate answer, but exclude the one that is currently edited if ((respAreaChoices[index] || []).find((r, idx) => r.label === label && idx !== choiceIndex)) { - // show warning for duplicated answers - this.setState({ - warning: { - open: true, - text: 'Duplicate answers are not allowed.', - onClose: undefined, - onConfirm: () => { - this.setState({ warning: { open: false } }); - }, - }, - }); - + showWarning('Duplicate answers are not allowed.'); return; }