@bigbinary/neeto-editor 1.47.127 → 1.47.130

package/dist/cjs/Editor.cjs.js

@@ -2107,8 +2107,6 @@ var MentionList = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
       var selectedIndex = this.state.selectedIndex;
       var items = this.props.items;
-      var Menu = Dropdown__default.default.Menu,
-        MenuItem = Dropdown__default.default.MenuItem;
       if (ramda.isEmpty(items)) {
         return /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "neeto-editor-mentions__wrapper",
@@ -2118,40 +2116,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__*/jsxRuntime.jsx("div", {
         className: "neeto-ui-dropdown__popup",
-        children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
-          className: "neeto-editor-mentions__wrapper",
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(MenuItem.Button, {
-              "data-testid": "neeto-editor-mention-list-".concat(name),
-              type: "button",
-              className: classnames__default.default("neeto-editor-mentions__item", {
-                active: index === selectedIndex
-              }),
-              onClick: function onClick() {
-                return _this2.selectItem(index);
-              },
-              children: [/*#__PURE__*/jsxRuntime.jsx(Avatar__default.default, {
-                size: "small",
-                user: {
-                  name: name,
-                  imageUrl: imageUrl
-                }
-              }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
-                style: "body2",
-                children: name
-              })]
+            return /*#__PURE__*/jsxRuntime.jsx("li", {
+              className: "neeto-ui-dropdown__popup-menu-item",
+              role: "menuitem",
+              children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+                "data-testid": "neeto-editor-mention-list-".concat(name),
+                type: "button",
+                className: classnames__default.default("neeto-ui-dropdown__popup-menu-item-btn neeto-editor-mentions__item", {
+                  active: index === selectedIndex
+                }),
+                onClick: function onClick() {
+                  return _this2.selectItem(index);
+                },
+                children: [/*#__PURE__*/jsxRuntime.jsx(Avatar__default.default, {
+                  size: "small",
+                  user: {
+                    name: name,
+                    imageUrl: imageUrl
+                  }
+                }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+                  style: "body2",
+                  children: name
+                })]
+              })
             }, key);
           })
         })