Allow the use of a custom input component (#739)

.changeset/popular-toys-wait.md

@@ -0,0 +1,5 @@
+---
+"react-mentions": minor
+---
+
+Allow the use of a custom input component

.gitignore

@@ -8,4 +8,6 @@
 
 npm-debug.log*
 
-*.log
+*.log
+
+.DS_Store

README.md

@@ -64,6 +64,7 @@ The `MentionsInput` supports the following props for configuring the widget:
 | forceSuggestionsAboveCursor | boolean                                                 | false          | Forces the SuggestionList to be rendered above the cursor                              |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
 | customSuggestionsContainer  | function(children)                                      | empty function | Allows customizing the container of the suggestions                                    |
+| inputComponent              | React component                                         | undefined      | Allows the use of a custom input component component                                                 |
 
 Each data source is configured using a `Mention` component, which has the following props:
 

demo/src/examples/CustomInputComponent.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { Mention, MentionsInput } from '../../../src'
+
+import { provideExampleValue } from './higher-order'
+import defaultStyle from './defaultStyle'
+import defaultMentionStyle from './defaultMentionStyle'
+
+// eslint-disable-next-line no-unused-vars
+import classNames from './example.module.css' // uses global css selector
+
+const  CustomInput = React.forwardRef((props, ref) => {
+  return <textarea ref={ref} {...props} className="custom-textarea" />
+})
+
+function CustomInputComponent({ value, data, onChange, onAdd }) {
+  return (
+    <div className="custom-input">
+      <h3>Custom input component</h3>
+
+      <MentionsInput
+        value={value}
+        onChange={onChange}
+        style={defaultStyle}
+        placeholder={"Mention people using '@'"}
+        a11ySuggestionsListLabel={"Suggested mentions"}
+        inputComponent={CustomInput}
+      >
+        <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
+      </MentionsInput>
+    </div>
+  )
+}
+
+const asExample = provideExampleValue('')
+
+export default asExample(CustomInputComponent)

demo/src/examples/Examples.js

@@ -13,6 +13,7 @@ import SingleLineIgnoringAccents from './SingleLineIgnoringAccents'
 import SuggestionPortal from './SuggestionPortal'
 import BottomGuard from './BottomGuard'
 import CustomSuggestionsContainer from './CustomSuggestionsContainer'
+import CustomInputComponent from './CustomInputComponent'
 
 const users = [
   {
@@ -90,6 +91,7 @@ export default function Examples() {
         <SuggestionPortal data={users} />
         <BottomGuard data={users} />
         <CustomSuggestionsContainer data={users} />
+        <CustomInputComponent data={users} />
       </div>
     </StylesViaJss>
   )

demo/src/examples/example.module.css

@@ -54,3 +54,25 @@
   text-decoration: underline;
   pointer-events: none;
 }
+
+
+:global(.custom-textarea) {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  border: 4px solid blue;
+  bottom: 0px;
+  height: 100%;
+  min-height: 80px;
+  margin: 0px;
+  resize: none;
+  display: block;
+  padding: 12px;
+  overflow: hidden;
+  position: absolute;
+  font-size: inherit;
+  box-sizing: border-box;
+  font-family: inherit;
+  letter-spacing: inherit;
+  background-color: transparent;
+}

src/MentionsInput.js

@@ -96,6 +96,7 @@ const propTypes = {
           : PropTypes.instanceOf(Element),
     }),
   ]),
+  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]),
 
   children: PropTypes.oneOfType([
     PropTypes.element,
@@ -229,15 +230,18 @@ class MentionsInput extends React.Component {
   }
 
   renderControl = () => {
-    let { singleLine, style } = this.props
+    let { singleLine, style, inputComponent: CustomInput } = this.props
     let inputProps = this.getInputProps()
 
     return (
       <div {...style('control')}>
         {this.renderHighlighter()}
-        {singleLine
-          ? this.renderInput(inputProps)
-          : this.renderTextarea(inputProps)}
+        {CustomInput
+          ? <CustomInput ref={this.setInputRef} {...inputProps} />
+          : singleLine
+            ? this.renderInput(inputProps)
+            : this.renderTextarea(inputProps)
+        }
       </div>
     )
   }

src/MentionsInput.spec.js

@@ -177,6 +177,21 @@ describe('MentionsInput', () => {
     expect(inputRef).toHaveBeenCalledWith(el)
   })
 
+  it('should render a custom input when supplied.', () => {
+    const CustomInput = React.forwardRef((props, ref) => {
+      return <input id="testInput" ref={ref} {...props} />
+    })
+    const wrapper = mount(
+      <MentionsInput value="test" inputComponent={CustomInput}>
+        <Mention trigger="@" data={data} />
+      </MentionsInput>
+    )
+
+    expect(wrapper.find('textarea').length).toEqual(0)
+    expect(wrapper.find('input').length).toEqual(1)
+    expect(wrapper.find('input#testInput').length).toEqual(1)
+  })
+
   describe('makeTriggerRegex', () => {
     it('should return regular expressions', () => {
       const trigger = /abc/