@bigbinary/neeto-editor 1.47.126 → 1.47.130

package/dist/Editor.js

@@ -2028,8 +2028,6 @@ var MentionList = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
       var selectedIndex = this.state.selectedIndex;
       var items = this.props.items;
-      var Menu = Dropdown.Menu,
-        MenuItem = Dropdown.MenuItem;
       if (isEmpty(items)) {
         return /*#__PURE__*/jsx("div", {
           className: "neeto-editor-mentions__wrapper",
@@ -2039,40 +2037,45 @@ var MentionList = /*#__PURE__*/function (_React$Component) {
           })
         });
       }
+
+      // Rendered with plain elements instead of neetoUI's Dropdown.Menu. That Menu
+      // auto-focuses its <ul> on mount, which pulls focus out of the editor and
+      // breaks mention typing/arrow navigation (the list is driven entirely by the
+      // editor's keydown). neetoUI's class names are kept so the popup styling is
+      // unchanged.
       return /*#__PURE__*/jsx("div", {
         className: "neeto-ui-dropdown__popup",
-        children: /*#__PURE__*/jsx(Menu, {
-          className: "neeto-editor-mentions__wrapper",
+        children: /*#__PURE__*/jsx("ul", {
+          className: "neeto-ui-dropdown__popup-menu neeto-editor-mentions__wrapper",
           "data-testid": "neeto-editor-mention-list",
-          ref: this.mentionRef
-          // Keep the list non-focusable so neetoUI's Menu can't auto-focus its
-          // <ul> and steal focus from the editor; mention keystrokes and arrow
-          // keys are handled through the editor's own keydown.
-          ,
-          tabIndex: null,
+          ref: this.mentionRef,
           children: items.map(function (_ref2, index) {
             var key = _ref2.key,
               name = _ref2.name,
               imageUrl = _ref2.imageUrl;
-            return /*#__PURE__*/jsxs(MenuItem.Button, {
-              "data-testid": "neeto-editor-mention-list-".concat(name),
-              type: "button",
-              className: classnames("neeto-editor-mentions__item", {
-                active: index === selectedIndex
-              }),
-              onClick: function onClick() {
-                return _this2.selectItem(index);
-              },
-              children: [/*#__PURE__*/jsx(Avatar, {
-                size: "small",
-                user: {
-                  name: name,
-                  imageUrl: imageUrl
-                }
-              }), /*#__PURE__*/jsx(Typography, {
-                style: "body2",
-                children: name
-              })]
+            return /*#__PURE__*/jsx("li", {
+              className: "neeto-ui-dropdown__popup-menu-item",
+              role: "menuitem",
+              children: /*#__PURE__*/jsxs("button", {
+                "data-testid": "neeto-editor-mention-list-".concat(name),
+                type: "button",
+                className: classnames("neeto-ui-dropdown__popup-menu-item-btn neeto-editor-mentions__item", {
+                  active: index === selectedIndex
+                }),
+                onClick: function onClick() {
+                  return _this2.selectItem(index);
+                },
+                children: [/*#__PURE__*/jsx(Avatar, {
+                  size: "small",
+                  user: {
+                    name: name,
+                    imageUrl: imageUrl
+                  }
+                }), /*#__PURE__*/jsx(Typography, {
+                  style: "body2",
+                  children: name
+                })]
+              })
             }, key);
           })
         })