Is it possible to completely disable internal focus handling?

[augustl]

Hi folks!

I have a tricky setup where I need to delicately manage focus, and it seems like there's no way to disable the internal focus handling of react-day-picker.

My setup is a grid (AG Grid specifically), where the cells in the grid are focused, and when a cell lose focus in the DOM, editing stops. I can show a date picker just fine, but when I click a date, the internal focus management in react-day-picker wants to focus the date I just clicked, causing the grid cell to lose focus, and editing of the grid to stop.

I tried adding a onDayClick handler and preventDefault and stopPropagation, to no avail. That makes sense according to my rudimentary understanding of the implementation - the focus handler here runs regardless of what happens in the event handler.

react-day-picker/src/DayPicker.tsx

Line 170 in ae63d4c

onDayClick?.(day.date, m, e);

Is there a way to somehow cause react-day-picker to not change focus when clicking a date? Or to disable the focus management entirely?

[gpbl]

@augustl sure it should be possible. I can provide an example later.

Try with a custom DayButton component and pass it to the components prop. Implement a custom onClick, onFocus, and onBlur. Look at the code you linked - to select the day onClick use the useDayPicker hook. It should work to remove the focus hooks.

[gpbl]

where the cells in the grid are focused, and when a cell lose focus in the DOM, editing stops.

I'm not sure if I understand your requirement :) Are you trying to keep a grid cell focused, while allowing the user to pick a day?

If so, I'd leave the focus go where the browser wants (or DayPicker decides). Try to see if the onSelect handler can help you to move the focus to the initial cell after a day is picked up.

<DayPicker onSelect={ () => putFocusBack() } />

Otherwise, try to identify in the DayPicker code where exactly the focus is lost: day buttons in DayPicker are focusable and the browser - not DayPicker - may change the focus too.

If it is the handleDayClick handler, then you can skip it by using a custom DayButton component, to implement its own click and focus handling:

https://stackblitz.com/edit/react-day-picker-9-2332?file=src%2FApp.tsx

import './App.css';
import 'react-day-picker/style.css';
import { DayButtonProps, DayPicker, useDayPicker } from 'react-day-picker';

function DayButton(props: DayButtonProps) {
  const { day, modifiers, ...buttonProps } = props;

  const dayPicker = useDayPicker();

  return (
    <button
      {...buttonProps}
      onClick={(e) => dayPicker.select?.(day.date, modifiers, e)}
      onFocus={undefined}
      onBlur={undefined}
    />
  );
}

function App() {
  return (
    <DayPicker
      mode="single"
      components={{
        DayButton,
      }}
    />
  );
}

export default App;

[augustl]

If so, I'd leave the focus go where the browser wants (or DayPicker decides). Try to see if the onSelect handler can help you to move the focus to the initial cell after a day is picked up.

The issue is that when focus is lost, the grid immediately stops edit mode and "kills" the entire input component and the date picker. So that's why I need to make sure focus is not lost or "stolen" in the first place :)

The solution where I completely render my own button seems perfect! I'll try that. Thanks :)

[gpbl]

@augustl please let me know it worked for you! Try to prevent also the onFocus event...

It seems your user interface doesn't support keyboard navigation, is this correct?

[augustl]

That's correct, in that the keyboard navigation constitutes of inputting the date in ISO format in the text field that's focused, so there's no keyboard navigation for the date picker as that's considered a visual aid to the input in the grid.