Skip to content

Commit

Permalink
[pickers] Fix field focusing when switching to view without a renderer (
Browse files Browse the repository at this point in the history
  • Loading branch information
LukasTy authored and thomasmoon committed Sep 6, 2024
1 parent b6fbb03 commit 117ba59
Showing 3 changed files with 33 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -249,6 +249,7 @@ export const usePickerViews = <
if (currentViewMode === 'field' && open) {
onClose();
setTimeout(() => {
fieldRef?.current?.setSelectedSections(view);
// focusing the input before the range selection is done
// calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
fieldRef?.current?.focusField(view);
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import * as React from 'react';
import { useSearchParams } from 'react-router-dom';
import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export default function DesktopDateTimePickerNoTimeRenderers() {
const [searchParams] = useSearchParams();
const enableAccessibleFieldDOMStructureParam = searchParams.get(
'enableAccessibleFieldDOMStructure',
);
const enableAccessibleFieldDOMStructure = enableAccessibleFieldDOMStructureParam
? enableAccessibleFieldDOMStructureParam !== 'false'
: true;
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DesktopDateTimePicker
enableAccessibleFieldDOMStructure
enableAccessibleFieldDOMStructure={enableAccessibleFieldDOMStructure}
label="Desktop Date Time Picker"
viewRenderers={{
hours: null,
23 changes: 23 additions & 0 deletions test/e2e/index.test.ts
Original file line number Diff line number Diff line change
@@ -875,6 +875,29 @@ async function initializeEnvironment(
expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('12');
});
});

it('should correctly select hours section when there are no time renderers on v6', async () => {
await renderFixture(
'DatePicker/DesktopDateTimePickerNoTimeRenderers?enableAccessibleFieldDOMStructure=false',
);

await page.getByRole('button').click();
await page.getByRole('gridcell', { name: '11' }).click();

// assert that the hours section has been selected using two APIs
await waitFor(async () => {
// firefox does not support document.getSelection().toString() on input elements
if (browserType.name() === 'firefox') {
expect(
await page.evaluate(
() => (document.activeElement as HTMLInputElement | null)?.selectionStart,
),
).to.equal(11);
} else {
expect(await page.evaluate(() => document.getSelection()?.toString())).to.equal('12');
}
});
});
});

describe('<DateRangePicker />', () => {

0 comments on commit 117ba59

Please sign in to comment.