Merge pull request LucasBassetti#119 from Cyclodex/PR-inputSupportAutofill

Chatbot input field: Support overriding of individual attributes per steps

Author: LucasBassetti

dist/react-simple-chatbot.js

@@ -527,6 +527,7 @@ class ChatBot extends Component {
       hideSubmitButton,
       inputStyle,
       placeholder,
+      inputAttributes,
       recognitionPlaceholder,
       style,
       submitButtonStyle,
@@ -551,6 +552,8 @@ class ChatBot extends Component {
     const inputPlaceholder = speaking ? recognitionPlaceholder :
       currentStep.placeholder || placeholder;
 
+    const inputAttributesOverride = currentStep.inputAttributes || inputAttributes;
+
     return (
       <div className={`rsc ${className}`}>
         {floating && (
@@ -596,6 +599,7 @@ class ChatBot extends Component {
                 invalid={inputInvalid}
                 disabled={disabled}
                 hasButton={!hideSubmitButton}
+                {...inputAttributesOverride}
               />
             )}
             {!currentStep.hideInput && !hideSubmitButton && (
@@ -643,6 +647,7 @@ ChatBot.propTypes = {
   opened: PropTypes.bool,
   toggleFloating: PropTypes.func,
   placeholder: PropTypes.string,
+  inputAttributes: PropTypes.object,
   recognitionEnable: PropTypes.bool,
   recognitionLang: PropTypes.string,
   recognitionPlaceholder: PropTypes.string,
@@ -679,6 +684,7 @@ ChatBot.defaultProps = {
   inputStyle: {},
   opened: undefined,
   placeholder: 'Type the message ...',
+  inputAttributes: {},
   recognitionEnable: false,
   recognitionLang: 'en',
   recognitionPlaceholder: 'Listening ...',

lib/ChatBot.jsx

@@ -59,4 +59,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'inputAttributes',
+    types: ['object'],
+    required: false,
+  },
 ];

lib/schemas/customSchema.js

@@ -29,4 +29,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'inputAttributes',
+    types: ['object'],
+    required: false,
+  },
 ];

lib/schemas/optionsSchema.js

@@ -44,4 +44,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'inputAttributes',
+    types: ['object'],
+    required: false,
+  },
 ];

lib/schemas/textSchema.js

@@ -24,4 +24,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'inputAttributes',
+    types: ['object'],
+    required: false,
+  },
 ];

lib/schemas/updateSchema.js

@@ -34,4 +34,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'inputAttributes',
+    types: ['object'],
+    required: false,
+  },
 ];

lib/schemas/userSchema.js

@@ -335,4 +335,25 @@ describe('ChatBot', () => {
       expect(step2Bubble.text()).to.be.equal('Hello World');
     });
   });
+
+  describe('Input Attributes', () => {
+    const wrapper = mount(
+      <ChatBot
+        steps={[
+          {
+            id: '1',
+            message: 'Hide Input',
+            inputAttributes: {
+              autoComplete: 'firstname',
+            },
+            end: true,
+          },
+        ]}
+      />,
+    );
+
+    it('should be rendered with input to autocomplete on \'firstname\'', () => {
+      expect(wrapper.find('input.rsc-input').props().autoComplete).to.be.equal('firstname');
+    });
+  });
 });

tests/lib/ChatBot.spec.js

@@ -102,4 +102,20 @@ describe('schema', () => {
       schema.checkInvalidIds(steps);
     }).to.not.throw();
   });
+  it('should not throw error with metadata', () => {
+    const step = { id: '1', message: 'Test', metadata: { data: 'test' } };
+    expect(() => {
+      schema.parse(step);
+    }).to.not.throw();
+    const resultStep = schema.parse(step);
+    expect(resultStep).to.be.equal(step);
+  });
+  it('should not throw error with inputAttributes', () => {
+    const step = { id: '1', message: 'Test', inputAttributes: { autoComplete: 'firstname' } };
+    expect(() => {
+      schema.parse(step);
+    }).to.not.throw();
+    const resultStep = schema.parse(step);
+    expect(resultStep).to.be.equal(step);
+  });
 });