Repository: react-materialize/react-materialize
Pull request #800 (2019-04-01 19:48:05)

fix: Datepicker now correctly handles onChange
# Description

While using `DatePicker` component I noticed a strange behavior.
When selecting a date, the `onChange` function seems to be called the next time the picker is drawn on the screen.
I've created a minimal, complete and verifiable example on CodeSandbox 

[![Edit React Materialize DatePicker Bug](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lmqp10wy7?fontsize=14)

This P.R fix this misbehavior. 

I also took the chance to remove unused code, improve `propTypes` and add `defaultProps`.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

Added missing tests.
Added missing snapshot.

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/DatePicker.js b/src/DatePicker.js
index b990e38..894720b 100644
--- a/src/DatePicker.js
+++ b/src/DatePicker.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import TextInput from './TextInput';
 import idgen from './idgen';
 
@@ -13,8 +12,13 @@ class DatePicker extends React.Component {
 
   componentDidMount() {
     if (typeof M !== 'undefined') {
+      const { onChange } = this.props;
       const elem = document.getElementById(this.id);
-      this.instance = M.Datepicker.init(elem, this.props.options);
+      const options = onChange
+        ? { ...this.props.options, onSelect: onChange }
+        : this.props.options;
+
+      this.instance = M.Datepicker.init(elem, options);
     }
   }
 
@@ -25,16 +29,10 @@ class DatePicker extends React.Component {
   }
 
   render() {
-    const { id, onChange, ...other } = this.props;
-    const onSelect = onChange;
+    const { ...other } = this.props;
 
     return (
-      <TextInput
-        id={this.id}
-        inputClassName="datepicker"
-        onSelect={onSelect}
-        {...other}
-      />
+      <TextInput id={this.id} inputClassName="datepicker" {...this.props} />
     );
   }
 }
@@ -66,7 +64,7 @@ DatePicker.propTypes = {
      * Used to create date object from current input string.
      * @default null
      */
-    parse: PropTypes.any,
+    parse: PropTypes.func,
     /**
      * The initial date to view when first opened.
      * @default null
@@ -86,7 +84,7 @@ DatePicker.propTypes = {
      * Custom function to disable certain days.
      * @default null
      */
-    disableDayFn: PropTypes.any,
+    disableDayFn: PropTypes.func,
     /**
      * First day of week (0: Sunday, 1: Monday etc).
      * @default 0
@@ -106,7 +104,7 @@ DatePicker.propTypes = {
      * Number of years either side, or array of upper/lower range.
      * @default 10
      */
-    yearRange: PropTypes.oneOf([PropTypes.number, PropTypes.array]),
+    yearRange: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
     /**
      * Changes Datepicker to RTL.
      * @default false
@@ -136,33 +134,116 @@ DatePicker.propTypes = {
      * Internationalization options.
      * @default See i18n documentation.
      */
-    i18n: PropTypes.any,
+    i18n: PropTypes.shape({
+      cancel: PropTypes.string,
+      clear: PropTypes.string,
+      done: PropTypes.string,
+      previousMonth: PropTypes.string,
+      nextMonth: PropTypes.string,
+      months: PropTypes.arrayOf(PropTypes.string),
+      monthsShort: PropTypes.arrayOf(PropTypes.string),
+      weekdays: PropTypes.arrayOf(PropTypes.string),
+      weekdaysShort: PropTypes.arrayOf(PropTypes.string),
+      weekdaysAbbrev: PropTypes.arrayOf(PropTypes.string)
+    }),
     /**
      * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
      * @default []
      */
-    events: PropTypes.array,
+    events: PropTypes.arrayOf(PropTypes.string),
     /**
      * Callback function when date is selected, first parameter is the newly selected date.
      * @default null
      */
-    onSelect: PropTypes.any,
+    onSelect: PropTypes.func,
     /**
      * Callback function when Datepicker is opened.
      * @default null
      */
-    onOpen: PropTypes.any,
+    onOpen: PropTypes.func,
     /**
      * Callback function when Datepicker is closed.
      * @default null
      */
-    onClose: PropTypes.any,
+    onClose: PropTypes.func,
     /**
      * Callback function when Datepicker HTML is refreshed.
      * @default null
      */
-    onDraw: PropTypes.any
+    onDraw: PropTypes.func
   })
 };
 
+DatePicker.defaultProps = {
+  options: {
+    autoClose: false,
+    format: 'mmm dd, yyyy',
+    parse: null,
+    defaultDate: null,
+    setDefaultDate: false,
+    disableWeekends: false,
+    disableDayFn: null,
+    firstDay: 0,
+    minDate: null,
+    maxDate: null,
+    yearRange: 10,
+    isRTL: false,
+    showMonthAfterYear: false,
+    showDaysInNextAndPreviousMonths: false,
+    container: null,
+    showClearBtn: false,
+    i18n: {
+      cancel: 'Cancel',
+      clear: 'Clear',
+      done: 'Ok',
+      previousMonth: '‹',
+      nextMonth: '›',
+      months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December'
+      ],
+      monthsShort: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec'
+      ],
+      weekdays: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday'
+      ],
+      weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+    },
+    events: [],
+    onSelect: null,
+    onOpen: null,
+    onClose: null,
+    onDraw: null
+  }
+};
+
 export default DatePicker;
diff --git a/src/Textarea.js b/src/Textarea.js
index ce7fd5d..2cf7cc0 100644
--- a/src/Textarea.js
+++ b/src/Textarea.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import idgen from './idgen';
 import Icon from './Icon';
-import constants from './constants';
+import TextInput from './TextInput';
 
 class Textarea extends Component {
   componentDidUpdate() {
@@ -15,36 +14,12 @@ class Textarea extends Component {
   }
 
   render() {
-    const {
-      s,
-      m,
-      l,
-      xl,
-      noLayout,
-      iconClassName,
-      icon,
-      label,
-      id,
-      onChange,
-      ...other
-    } = this.props;
+    const { iconClassName, icon, label, id, onChange, ...other } = this.props;
 
     const computedId = id || idgen();
 
-    const sizes = { s, m, l, xl };
-
-    let responsiveClasses;
-    if (!noLayout) {
-      responsiveClasses = { col: true };
-      constants.SIZES.forEach(size => {
-        responsiveClasses[size + sizes[size]] = sizes[size];
-      });
-    }
-
-    const wrapperClasses = cx('input-field', responsiveClasses);
-
     return (
-      <div className={wrapperClasses}>
+      <div className="input-field">
         {icon && this.renderIcon(icon, iconClassName)}
         <textarea
           ref={input => {
@@ -62,26 +37,6 @@ class Textarea extends Component {
 }
 
 Textarea.propTypes = {
-  /*
- * Strip away all layout classes such as col and sX
- */
-  noLayout: PropTypes.bool,
-  /*
-   * Responsive size for Mobile Devices
-   */
-  s: PropTypes.number,
-  /*
-   * Responsive size for Tablet Devices
-   */
-  m: PropTypes.number,
-  /*
-   * Responsive size for Desktop Devices
-   */
-  l: PropTypes.number,
-  /**
-   *  Responsive size for Large Desktop Devices
-   */
-  xl: PropTypes.number,
   /*
    * render icon next to input
    */
diff --git a/src/index.js b/src/index.js
index 29e7d2f..0dffaf3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ export { default as Autocomplete } from './Autocomplete';
 export { default as Badge } from './Badge';
 export { default as Breadcrumb } from './Breadcrumb';
 export { default as Button } from './Button';
-export { default as Caption } from './Caption';
 export { default as Card } from './Card';
 export { default as CardPanel } from './CardPanel';
 export { default as CardTitle } from './CardTitle';
diff --git a/stories/Media.stories.js b/stories/Media.stories.js
index 6c08bd4..6a8541d 100644
--- a/stories/Media.stories.js
+++ b/stories/Media.stories.js
@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import MediaBox from '../src/MediaBox';
 import Slider from '../src/Slider';
 import Slide from '../src/Slide';
-import Caption from '../src/Caption';
 
 const stories = storiesOf('Javascript|Media', module);
 
@@ -22,37 +21,50 @@ stories.add('Default', () => (
 
 stories.add('Slider', () => (
   <Slider>
-    <Slide image={<img src="http://lorempixel.com/780/580/nature/1" alt="" />}>
-      <Caption>
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580/nature/1"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption center-align">
         <h3>This is our big Tagline!</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
+      </div>
     </Slide>
-    <Slide image={<img src="http://lorempixel.com/780/580/nature/2" alt="" />}>
-      <Caption placement="left">
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580//nature/2"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption left-align">
         <h3>Left Aligned Caption</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
+      </div>
     </Slide>
-    <Slide image={<img src="https://lorempixel.com/780/580/nature/3" alt="" />}>
-      <Caption placement="right">
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580//nature/3"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption right-align">
         <h3>Right Aligned Caption</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
-    </Slide>
-    <Slide image={<img src="https://lorempixel.com/580/250/nature/4" alt="" />}>
-      <Caption>
-        <h3>This is our big Tagline!</h3>
-        <h5 className="light grey-text text-lighten-3">
-          Here's our small slogan.
-        </h5>
-      </Caption>
+      </div>
     </Slide>
   </Slider>
 ));
diff --git a/stories/Textarea.stories.js b/stories/Textarea.stories.js
index 8481e33..3568c5a 100644
--- a/stories/Textarea.stories.js
+++ b/stories/Textarea.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, boolean, number, withKnobs } from '@storybook/addon-knobs';
-import Row from '../src/Row';
 import Textarea from '../src/Textarea';
 
 const stories = storiesOf('Components|Textarea', module);
-stories.addDecorator(withKnobs);
 
 stories.addParameters({
   info: {
@@ -16,40 +13,12 @@ stories.addParameters({
   }
 });
 
-stories.add('Textarea', () => {
-  const defaultValue = 12;
-  const options = {
-    range: true,
-    min: 1,
-    max: 12,
-    step: 1
-  };
+stories.add('Textarea', () => <Textarea />);
 
-  return (
-    <Row>
-      <Textarea
-        s={number('s', defaultValue, options)}
-        m={number('m', defaultValue, options)}
-        l={number('l', defaultValue, options)}
-        xl={number('xl', defaultValue, options)}
-      />
-    </Row>
-  );
-});
-
-stories.add('Disabled', () => (
-  <Textarea
-    value={text('value', 'I was here')}
-    disabled={boolean('disabled', true)}
-  />
-));
+stories.add('Disabled', () => <Textarea value="I was here" disabled />);
 
-stories.add('Placeholder', () => (
-  <Textarea placeholder={text('placeholder', 'I was here')} />
-));
+stories.add('Placeholder', () => <Textarea placeholder="I was here" />);
 
-stories.add('Label', () => (
-  <Textarea label={text('label', 'Write something here...')} />
-));
+stories.add('Label', () => <Textarea label="Write something here..." />);
 
-stories.add('Icon', () => <Textarea icon={text('icon', 'mode_edit')} />);
+stories.add('Icon', () => <Textarea icon="mode_edit" />);


Test patch:
diff --git a/test/DatePicker.spec.js b/test/DatePicker.spec.js
new file mode 100644
index 0000000..d626835
--- /dev/null
+++ b/test/DatePicker.spec.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import DatePicker from '../src/DatePicker';
+import mocker from './helper/new-mocker';
+
+describe('<DatePicker />', () => {
+  let wrapper;
+
+  test('renders', () => {
+    wrapper = shallow(<DatePicker />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('renders with a label', () => {
+    wrapper = shallow(<DatePicker label="DatePicker label" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('accepts external `id` value', () => {
+    wrapper = shallow(<DatePicker id="ID" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('initialises', () => {
+    const datePickerInitMock = jest.fn();
+    const datePickerInstanceDestroyMock = jest.fn();
+    const datePickerMock = {
+      init: (el, options) => {
+        datePickerInitMock(options);
+        return {
+          destroy: datePickerInstanceDestroyMock
+        };
+      }
+    };
+
+    const restore = mocker('Datepicker', datePickerMock);
+
+    beforeEach(() => {
+      datePickerInitMock.mockClear();
+      datePickerInstanceDestroyMock.mockClear();
+    });
+
+    afterAll(() => {
+      restore();
+    });
+
+    test('uses default options if none are given', () => {
+      wrapper = mount(<DatePicker />);
+
+      expect(datePickerInitMock).toHaveBeenCalledWith({
+        autoClose: false,
+        format: 'mmm dd, yyyy',
+        parse: null,
+        defaultDate: null,
+        setDefaultDate: false,
+        disableWeekends: false,
+        disableDayFn: null,
+        firstDay: 0,
+        minDate: null,
+        maxDate: null,
+        yearRange: 10,
+        isRTL: false,
+        showMonthAfterYear: false,
+        showDaysInNextAndPreviousMonths: false,
+        container: null,
+        showClearBtn: false,
+        i18n: {
+          cancel: 'Cancel',
+          clear: 'Clear',
+          done: 'Ok',
+          previousMonth: '‹',
+          nextMonth: '›',
+          months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December'
+          ],
+          monthsShort: [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec'
+          ],
+          weekdays: [
+            'Sunday',
+            'Monday',
+            'Tuesday',
+            'Wednesday',
+            'Thursday',
+            'Friday',
+            'Saturday'
+          ],
+          weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+          weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+        },
+        events: [],
+        onSelect: null,
+        onOpen: null,
+        onClose: null,
+        onDraw: null
+      });
+    });
+  });
+});
diff --git a/test/Textarea.spec.js b/test/Textarea.spec.js
index 7c9b3ab..a3785eb 100644
--- a/test/Textarea.spec.js
+++ b/test/Textarea.spec.js
@@ -10,24 +10,6 @@ describe('<Textarea />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('Handles layout classes', () => {
-    wrapper = shallow(<Textarea s={4} m={6} />);
-
-    expect(wrapper.hasClass('input-field')).toBeTruthy();
-    expect(wrapper.hasClass('col')).toBeTruthy();
-    expect(wrapper.hasClass('s4')).toBeTruthy();
-    expect(wrapper.hasClass('m6')).toBeTruthy();
-  });
-
-  test('Handles removing layout classes', () => {
-    wrapper = shallow(<Textarea s={4} m={6} noLayout />);
-
-    expect(wrapper.hasClass('input-field')).toBeTruthy();
-    expect(wrapper.hasClass('col')).toBeFalsy();
-    expect(wrapper.hasClass('s4')).toBeFalsy();
-    expect(wrapper.hasClass('m6')).toBeFalsy();
-  });
-
   test('Disabled', () => {
     wrapper = shallow(<Textarea value="I was here" disabled />);
     expect(wrapper).toMatchSnapshot();
diff --git a/test/__snapshots__/DatePicker.spec.js.snap b/test/__snapshots__/DatePicker.spec.js.snap
new file mode 100644
index 0000000..dd3d80e
--- /dev/null
+++ b/test/__snapshots__/DatePicker.spec.js.snap
@@ -0,0 +1,284 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DatePicker /> accepts external \`id\` value 1`] = `
+<TextInput
+  id="ID"
+  inputClassName="datepicker"
+  options={
+    Object {
+      "autoClose": false,
+      "container": null,
+      "defaultDate": null,
+      "disableDayFn": null,
+      "disableWeekends": false,
+      "events": Array [],
+      "firstDay": 0,
+      "format": "mmm dd, yyyy",
+      "i18n": Object {
+        "cancel": "Cancel",
+        "clear": "Clear",
+        "done": "Ok",
+        "months": Array [
+          "January",
+          "February",
+          "March",
+          "April",
+          "May",
+          "June",
+          "July",
+          "August",
+          "September",
+          "October",
+          "November",
+          "December",
+        ],
+        "monthsShort": Array [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec",
+        ],
+        "nextMonth": "›",
+        "previousMonth": "‹",
+        "weekdays": Array [
+          "Sunday",
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday",
+        ],
+        "weekdaysAbbrev": Array [
+          "S",
+          "M",
+          "T",
+          "W",
+          "T",
+          "F",
+          "S",
+        ],
+        "weekdaysShort": Array [
+          "Sun",
+          "Mon",
+          "Tue",
+          "Wed",
+          "Thu",
+          "Fri",
+          "Sat",
+        ],
+      },
+      "isRTL": false,
+      "maxDate": null,
+      "minDate": null,
+      "onClose": null,
+      "onDraw": null,
+      "onOpen": null,
+      "onSelect": null,
+      "parse": null,
+      "setDefaultDate": false,
+      "showClearBtn": false,
+      "showDaysInNextAndPreviousMonths": false,
+      "showMonthAfterYear": false,
+      "yearRange": 10,
+    }
+  }
+/>
+`;
+
+exports[`<DatePicker /> renders 1`] = `
+<TextInput
+  id="datepickermockId"
+  inputClassName="datepicker"
+  options={
+    Object {
+      "autoClose": false,
+      "container": null,
+      "defaultDate": null,
+      "disableDayFn": null,
+      "disableWeekends": false,
+      "events": Array [],
+      "firstDay": 0,
+      "format": "mmm dd, yyyy",
+      "i18n": Object {
+        "cancel": "Cancel",
+        "clear": "Clear",
+        "done": "Ok",
+        "months": Array [
+          "January",
+          "February",
+          "March",
+          "April",
+          "May",
+          "June",
+          "July",
+          "August",
+          "September",
+          "October",
+          "November",
+          "December",
+        ],
+        "monthsShort": Array [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec",
+        ],
+        "nextMonth": "›",
+        "previousMonth": "‹",
+        "weekdays": Array [
+          "Sunday",
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday",
+        ],
+        "weekdaysAbbrev": Array [
+          "S",
+          "M",
+          "T",
+          "W",
+          "T",
+          "F",
+          "S",
+        ],
+        "weekdaysShort": Array [
+          "Sun",
+          "Mon",
+          "Tue",
+          "Wed",
+          "Thu",
+          "Fri",
+          "Sat",
+        ],
+      },
+      "isRTL": false,
+      "maxDate": null,
+      "minDate": null,
+      "onClose": null,
+      "onDraw": null,
+      "onOpen": null,
+      "onSelect": null,
+      "parse": null,
+      "setDefaultDate": false,
+      "showClearBtn": false,
+      "showDaysInNextAndPreviousMonths": false,
+      "showMonthAfterYear": false,
+      "yearRange": 10,
+    }
+  }
+/>
+`;
+
+exports[`<DatePicker /> renders with a label 1`] = `
+<TextInput
+  id="datepickermockId"
+  inputClassName="datepicker"
+  label="DatePicker label"
+  options={
+    Object {
+      "autoClose": false,
+      "container": null,
+      "defaultDate": null,
+      "disableDayFn": null,
+      "disableWeekends": false,
+      "events": Array [],
+      "firstDay": 0,
+      "format": "mmm dd, yyyy",
+      "i18n": Object {
+        "cancel": "Cancel",
+        "clear": "Clear",
+        "done": "Ok",
+        "months": Array [
+          "January",
+          "February",
+          "March",
+          "April",
+          "May",
+          "June",
+          "July",
+          "August",
+          "September",
+          "October",
+          "November",
+          "December",
+        ],
+        "monthsShort": Array [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec",
+        ],
+        "nextMonth": "›",
+        "previousMonth": "‹",
+        "weekdays": Array [
+          "Sunday",
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday",
+        ],
+        "weekdaysAbbrev": Array [
+          "S",
+          "M",
+          "T",
+          "W",
+          "T",
+          "F",
+          "S",
+        ],
+        "weekdaysShort": Array [
+          "Sun",
+          "Mon",
+          "Tue",
+          "Wed",
+          "Thu",
+          "Fri",
+          "Sat",
+        ],
+      },
+      "isRTL": false,
+      "maxDate": null,
+      "minDate": null,
+      "onClose": null,
+      "onDraw": null,
+      "onOpen": null,
+      "onSelect": null,
+      "parse": null,
+      "setDefaultDate": false,
+      "showClearBtn": false,
+      "showDaysInNextAndPreviousMonths": false,
+      "showMonthAfterYear": false,
+      "yearRange": 10,
+    }
+  }
+/>
+`;
diff --git a/test/__snapshots__/Textarea.spec.js.snap b/test/__snapshots__/Textarea.spec.js.snap
index ca97ec1..fff9088 100644
--- a/test/__snapshots__/Textarea.spec.js.snap
+++ b/test/__snapshots__/Textarea.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Textarea /> Disabled 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -18,7 +18,7 @@ exports[`<Textarea /> Disabled 1`] = `
 
 exports[`<Textarea /> Icon 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <Icon
     className="material-icons prefix"
@@ -37,7 +37,7 @@ exports[`<Textarea /> Icon 1`] = `
 
 exports[`<Textarea /> Label 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -53,7 +53,7 @@ exports[`<Textarea /> Label 1`] = `
 
 exports[`<Textarea /> Placeholder 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -68,7 +68,7 @@ exports[`<Textarea /> Placeholder 1`] = `
 
 exports[`<Textarea /> Textarea 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"