Keep input tag's value attribute updated with input's value

Author: scottpchow23

src/components/Input/MonthInput.js

@@ -110,6 +110,7 @@ export default class MonthInput extends React.Component {
       value,
     });
     this.parseInput(value);
+    this.inputEl.setAttribute('value', value);
   };
 
   onSelect = (newDate) => {
@@ -224,6 +225,7 @@ export default class MonthInput extends React.Component {
 
     if (!isSame) {
       this.inputEl.value = currentValue;
+      this.inputEl.setAttribute('value', currentValue);
     }
   };
 
@@ -232,7 +234,9 @@ export default class MonthInput extends React.Component {
 
     const parsedDate = this.props.parse(this.inputEl.value, this.props.dateFormat);
     if (parsedDate) {
-      this.inputEl.value = format(parsedDate, this.props.dateFormat);
+      const value = format(parsedDate, this.props.dateFormat);
+      this.inputEl.value = value;
+      this.inputEl.setAttribute('value', value);
     }
   };
 
@@ -260,7 +264,7 @@ export default class MonthInput extends React.Component {
     } = this.props;
     const { open } = this.state;
     const date = this.getCurrentDate();
-    const dropdownProps = open ? { positionFixed } : {};
+    const dropdownProps = open ? { positionfixed: positionFixed } : {};
 
     // <DropdownToggle tag="div" disabled> is to wrap the input in a container for positioning dropdown/up, without breaking showOnFocus
     // TODO extract a DropdownInput component that can encapsulate the defaultValue/value controlled/uncontrolled behavior.

src/components/Input/MonthInput.spec.js

@@ -1,4 +1,6 @@
 import assert from 'assert';
+import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import addMonths from 'date-fns/add_months';
 import addYears from 'date-fns/add_years';
 import isSameDay from 'date-fns/is_same_day';
@@ -324,4 +326,32 @@ describe('<MonthInput />', () => {
       assert.strictEqual('visually-hidden', prevMonthLabel.prop('className'));
     });
   });
+
+  describe('RTL compatibility', () => {
+    it('initial value should appear in the input value attribute', async () => {
+      const screen = render(<MonthInput defaultValue="Dec 2025" />);
+      assert.strictEqual(screen.getByTestId('react-gears-monthinput-dropdowntoggle-input').getAttribute('value'), 'Dec 2025');
+    });
+    it('valid user typed value should appear in the input value attribute', async () => {
+      const screen = render(<MonthInput />);
+
+      const input = screen.getByTestId('react-gears-monthinput-dropdowntoggle-input');
+      await userEvent.type(input, 'Dec 2025');
+      assert.strictEqual(screen.getByTestId('react-gears-monthinput-dropdowntoggle-input').getAttribute('value'), 'Dec 2025');
+    });
+    it('invalid user typed value should appear in the input value attribute', async () => {
+      const screen = render(<MonthInput />);
+
+      const input = screen.getByTestId('react-gears-monthinput-dropdowntoggle-input');
+      await userEvent.type(input, 'Foo bar');
+      assert.strictEqual(screen.getByTestId('react-gears-monthinput-dropdowntoggle-input').getAttribute('value'), 'Foo bar');
+    });
+    it('blurring the input should update the input value to the formatted value', async () => {
+      const screen = render(<MonthInput parse={() => 'Dec 2025'} />);
+      const input = screen.getByTestId('react-gears-monthinput-dropdowntoggle-input');
+      await userEvent.type(input, '12/25/2025');
+      fireEvent.blur(input);
+      assert.strictEqual(screen.getByTestId('react-gears-monthinput-dropdowntoggle-input').getAttribute('value'), 'Dec 2025');
+    });
+  });
 });