🐛 Typography editable should focus at the end

close #21261
ant-design · Feb 7, 2020 · 9c7ec87 · 9c7ec87
1 parent d23c550
commit 9c7ec87
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/components/typography/Editable.tsx b/components/typography/Editable.tsx
@@ -46,8 +46,11 @@ class Editable extends React.Component<EditableProps, EditableState> {
   };
 
   componentDidMount() {
-    if (this.textarea) {
-      this.textarea.focus();
+    if (this.textarea && this.textarea.resizableTextArea) {
+      const { textArea } = this.textarea.resizableTextArea;
+      textArea.focus();
+      const { length } = textArea.value;  
+      textArea.setSelectionRange(length, length);  
     }
   }
 

diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
@@ -287,6 +287,17 @@ describe('Typography', () => {
         wrapper.find('TextArea').simulate('blur');
       });
     });
+
+    it('should focus at the end of textarea', () => {
+      const wrapper = mount(<Paragraph editable>content</Paragraph>);
+      wrapper
+        .find('.ant-typography-edit')
+        .first()
+        .simulate('click');
+      const textareaNode = wrapper.find('textarea').getDOMNode();
+      expect(textareaNode.selectionStart).toBe(7);
+      expect(textareaNode.selectionEnd).toBe(7);
+    });
   });
 
   it('warning if use setContentRef', () => {