diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js index 7a46280e40dd6a80ee0132821dc33093f5a414af..f73ef480743abeae338d7abb0c58f09bd94d9b28 100644 --- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js @@ -22,7 +22,8 @@ const DropDownButton = styled.button` background: #fff; border: none; color: #000; - cursor: ${props => (props.disabled ? `cursor` : `pointer`)}; + cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; + opacity: ${props => (props.disabled ? `0.4` : `1`)}; display: flex; position: relative; width: 160px; @@ -81,7 +82,8 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { return editable; }); - const isDisabled = !isEditable; + let isDisabled = !isEditable; + if (node.attrs.options.length === 0) isDisabled = true; const onChange = option => { const allNodes = getNodes(main); @@ -117,8 +119,8 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { const onKeyDown = (e, index) => { e.preventDefault(); - // arrow down if (e.keyCode === 40) { + // arrow down if (index === itemRefs.current.length - 1) { itemRefs.current[0].current.focus(); } else { @@ -128,7 +130,10 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { // arrow up if (e.keyCode === 38) { - if (index === 0) { + if ( + index === 0 && + itemRefs.current[itemRefs.current.length - 1].current + ) { itemRefs.current[itemRefs.current.length - 1].current.focus(); } else { itemRefs.current[index - 1].current.focus(); @@ -162,6 +167,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { disabled={isDisabled} onKeyDown={e => { if (e.keyCode === 40) { + if (!itemRefs.current[0].current) return; itemRefs.current[0].current.focus(); } if (e.keyCode === 27) { @@ -205,7 +211,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { </DropDownMenu> </Wrapper> ); - }, [node.attrs.options, selectedOption, isOpen]); + }, [node.attrs.options, selectedOption, isOpen, isDisabled]); return MultipleDropDown; }; diff --git a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js index 5db50ef91e627ed3f8fb3bf09f88f6f12deb1bfb..8d1461c3a4f069af9b44d7dd0e56b035ef413547 100644 --- a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js +++ b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js @@ -23,7 +23,7 @@ export default class MultipleDropDownContainerNodeView extends QuestionsNodeView } stopEvent(event) { - if (event.target.type === 'textarea') { + if (event.target.type === 'textarea' || event.target.type === 'text') { return true; } const innerView = this.context.pmViews[this.node.attrs.id];