fix: can't select when option has same value (#33)

* fix: can't select when option has same value

* chore: add test

Author: zhangyu1818

src/DropdownMenu.tsx

@@ -27,19 +27,19 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
     return (
       <Menu
         prefixCls={`${prefixCls}-menu`}
-        activeKey={activeOption.value}
+        activeKey={activeOption.key}
         onSelect={({ key }) => {
-          const option = options.find(({ value }) => value === key);
+          const option = options.find(({ key: optionKey }) => optionKey === key);
           selectOption(option);
         }}
         onFocus={onFocus}
         onBlur={onBlur}
       >
         {options.map((option, index) => {
-          const { value, disabled, children, className, style } = option;
+          const { key, disabled, children, className, style } = option;
           return (
             <MenuItem
-              key={value}
+              key={key}
               disabled={disabled}
               className={className}
               style={style}

src/Mentions.tsx

@@ -298,7 +298,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     const targetMeasureText = measureText || this.state.measureText || '';
     const { children, filterOption } = this.props;
     const list = toArray(children)
-      .map(({ props }: { props: OptionProps }) => props)
+      .map(({ props, key }: { props: OptionProps, key: string }) => ({ ...props, key: key || props.value }))
       .filter((option: OptionProps) => {
         /** Return all result if `filterOption` is false. */
         if (filterOption === false) {

src/Option.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 export interface OptionProps {
   value?: string;
+  key?: string;
   disabled?: boolean;
   children?: React.ReactNode;
   className?: string;

tests/FullProcess.spec.jsx

@@ -115,6 +115,22 @@ describe('Full Process', () => {
     expect(onPressEnter).toHaveBeenCalled();
   });
 
+  it('should support same value', () => {
+    const wrapper = mount(
+      <Mentions>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="bamboo" key="same_bamboo">
+          Bamboo
+        </Option>
+        <Option value="light">Light</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>,
+    );
+
+    simulateInput(wrapper, '@');
+    expect(wrapper.find('.rc-mentions-dropdown-menu-item-active').length).toBe(1);
+  });
+
   it('ESC', () => {
     const wrapper = createMentions();