diff --git a/Composer/packages/adaptive-form/src/components/fields/IntellisenseFields.tsx b/Composer/packages/adaptive-form/src/components/fields/IntellisenseFields.tsx index 6e7647f335..2173a55b13 100644 --- a/Composer/packages/adaptive-form/src/components/fields/IntellisenseFields.tsx +++ b/Composer/packages/adaptive-form/src/components/fields/IntellisenseFields.tsx @@ -12,6 +12,8 @@ import { JsonField } from './JsonField'; import { NumberField } from './NumberField'; import { StringField } from './StringField'; +const noop = () => {}; + export const IntellisenseTextField: React.FC> = (props) => { const { id, value = '', onChange, uiOptions, focused: defaultFocused } = props; @@ -39,7 +41,7 @@ export const IntellisenseTextField: React.FC> = (props) => { focused={focused} id={id} value={textFieldValue} - onBlur={() => {}} // onBlur managed by Intellisense + onBlur={noop} // onBlur managed by Intellisense onChange={(newValue) => onValueChanged(newValue || '')} onClick={onClickTextField} onKeyDown={onKeyDownTextField} @@ -72,7 +74,7 @@ export const IntellisenseExpressionField: React.FC> = (props) focused={focused} id={id} value={textFieldValue} - onBlur={() => {}} // onBlur managed by Intellisense + onBlur={noop} // onBlur managed by Intellisense onChange={(newValue) => onValueChanged(newValue || '')} onClick={onClickTextField} onKeyDown={onKeyDownTextField} @@ -110,7 +112,7 @@ export const IntellisenseNumberField: React.FC> = (props) => focused={focused} id={id} value={textFieldValue} - onBlur={() => {}} // onBlur managed by Intellisense + onBlur={noop} // onBlur managed by Intellisense onChange={(newValue) => onValueChanged(newValue || 0)} onClick={onClickTextField} onKeyDown={onKeyDownTextField} @@ -167,7 +169,7 @@ export const IntellisenseJSONField: React.FC> = (props) => { {...props} style={{ height: 100 }} value={textFieldValue} - onBlur={() => {}} // onBlur managed by Intellisense + onBlur={noop} // onBlur managed by Intellisense onChange={onValueChanged} /> )} diff --git a/Composer/packages/intellisense/src/components/Intellisense.tsx b/Composer/packages/intellisense/src/components/Intellisense.tsx index f0c31d4c5f..ed83e2052e 100644 --- a/Composer/packages/intellisense/src/components/Intellisense.tsx +++ b/Composer/packages/intellisense/src/components/Intellisense.tsx @@ -81,7 +81,7 @@ export const Intellisense = React.memo( const outsideClickHandler = (event: MouseEvent) => { const { x, y } = event; - let shouldBlur = true; + let shouldBlur = focused; if (mainContainerRef.current && !checkIsOutside(x, y, mainContainerRef.current)) { shouldBlur = false; @@ -98,7 +98,7 @@ export const Intellisense = React.memo( }; const keyupHandler = (event: KeyboardEvent) => { - if (event.key === 'Escape') { + if (event.key === 'Escape' && focused) { setShowCompletionList(false); onBlur && onBlur(id); } @@ -111,7 +111,7 @@ export const Intellisense = React.memo( document.body.removeEventListener('click', outsideClickHandler); document.body.removeEventListener('keyup', keyupHandler); }; - }, []); + }, [focused, onBlur]); // When textField value is changed const onValueChanged = (newValue: string) => {