We want to use the the DateRangePicker with the added design feature of having the calendar icon as endadornment.

As the title says, I run into the problem that the endadornment disappears when in mobile view (emulated in browser). Looking into the DOM I can see that there is in fact no elements for the endadornment. Added curiousity is that the endAdornment does appear when I activate the inspect element tool.

Mockup https://stackblitz.com/edit/github-t5rrh1?file=src%2Findex.tsx

Sample code:

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import { InputAdornment, IconButton, Tooltip } from '@mui/material';
import { DateRangePicker } from '@mui/x-date-pickers-pro';
import EventIcon from '@mui/icons-material/Event';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';

ReactDOM.createRoot(document.querySelector('#root')!).render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateRangePicker
          slotProps={{
            textField: {
              sx: { minWidth: 150, maxWidth: 170 },
              InputProps: {
                endAdornment: (
                  <InputAdornment position="end">
                    <Tooltip title={'Select date'}>
                      <IconButton>
                        <EventIcon />
                      </IconButton>
                    </Tooltip>
                  </InputAdornment>
                ),
              },
            },
          }}
        />
      </LocalizationProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

[Missing endadornment] (https://i.sstatic.net/5JNeN3HO.png)

I’ve tried different workarounds using slots prop but can’t really reach an elegant solution.