diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js index 486741f24f53077821af4600d6cf8bf6d6c0a671..2ad24b4f52a427de59d90219ff252db5af4683a5 100644 --- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js @@ -85,7 +85,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { }); let isDisabled = !isEditable; - if (allOptions.length === 0) isDisabled = true; + if (allOptions && allOptions.length === 0) isDisabled = true; const onChange = option => { const allNodes = getNodes(main); @@ -109,9 +109,9 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { useEffect(() => { const theNode = getMatchingNode(main, node); - setAllOptions(theNode.attrs.options); - setSelectedOption(theNode.attrs.correct); - }, [getMatchingNode(main, node).attrs.options]); + setAllOptions(theNode?.attrs?.options); + setSelectedOption(theNode?.attrs?.correct); + }, [getMatchingNode(main, node)?.attrs?.options]); useEffect(() => { if (isDisabled) setIsOpen(false); @@ -200,22 +200,23 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { isOpen={isOpen} role="listbox" > - {allOptions.map((option, index) => { - itemRefs.current[index] = itemRefs.current[index] || createRef(); - return ( - <span - aria-selected={option.value === selectedOption} - key={option.value} - onClick={() => onChange(option)} - onKeyDown={e => onKeyDown(e, index)} - ref={itemRefs.current[index]} - role="option" - tabIndex="-1" - > - {option.label} - </span> - ); - })} + {allOptions && + allOptions.map((option, index) => { + itemRefs.current[index] = itemRefs.current[index] || createRef(); + return ( + <span + aria-selected={option.value === selectedOption} + key={option.value} + onClick={() => onChange(option)} + onKeyDown={e => onKeyDown(e, index)} + ref={itemRefs.current[index]} + role="option" + tabIndex="-1" + > + {option.label} + </span> + ); + })} </DropDownMenu> </Wrapper> );