diff --git a/src/components/Input/MonthInput.js b/src/components/Input/MonthInput.js index a8fd17f8..324cea78 100644 --- a/src/components/Input/MonthInput.js +++ b/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 ? { strategy: 'fixed' } : {}; // 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. diff --git a/src/components/Input/MonthInput.spec.js b/src/components/Input/MonthInput.spec.js index 72f0d1cd..b1ca5bf8 100644 --- a/src/components/Input/MonthInput.spec.js +++ b/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,35 @@ describe('', () => { assert.strictEqual('visually-hidden', prevMonthLabel.prop('className')); }); }); + + describe('RTL compatibility', () => { + it('initial value should appear in the input value attribute', async () => { + const screen = render(); + 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(); + + const input = screen.getByTestId('react-gears-monthinput-dropdowntoggle-input'); + await userEvent.type(input, 'Dec 2025'); + assert.strictEqual(input.getAttribute('value'), 'Dec 2025'); + }); + it('invalid user typed value should appear in the input value attribute', async () => { + const screen = render(); + + const input = screen.getByTestId('react-gears-monthinput-dropdowntoggle-input'); + await userEvent.type(input, 'Foo bar'); + assert.strictEqual(input.getAttribute('value'), 'Foo bar'); + }); + it('blurring the input should update the input value to the formatted value', async () => { + const screen = render( 'Dec 2025'} />); + const input = screen.getByTestId('react-gears-monthinput-dropdowntoggle-input'); + await userEvent.type(input, '12/25/2025'); + fireEvent.blur(input); + assert.strictEqual(input.getAttribute('value'), 'Dec 2025'); + }); + }); });