CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
ehsan0x
ehsan0x

Reputation: 670

How to Disable MUI DatePicker Focus Highlight But Keep TextField Focus Highlight?

I'm building a date picker in react.js with MUI DatePicker. The code is almost exactly what their documentation has used.

However, when the component renders, I get two layers of blue color focus outline. One from DatePicker and one from TextField. This causes the DatePicker label to look like it's crossed out. I've struggled to get this working for days now.

I have tried playing with:

But no luck. I'm relatively new to front-end any help is much appreciated.

This is what I get:

This is what I get

This is what I want to achieve: (I have set TextField to focused just for the sake of displaying what I need to achieve here):

enter image description here

Here's my implementation of the DatePicker:

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={localeMap.en}>
    <Box m={2}>
        <DatePicker
            showToolbar={false}
            views={["year", "month", "day"]}
            openTo="day"
            label="Day"
            maxDate={new Date()}
            value={v}
            onChange={setV}
            renderInput={(params) => (
                <TextField
                {...params}
                helperText={null}
                onKeyDown={onKeyDown}
                />
                )}
        />
    </Box>
</LocalizationProvider>
<button type="submit" onClick={fetchReports}
    className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font 
    medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 
    focus:outline-none dark:focus:ring-blue-800 border-black">
    Get Report
</button>

Upvotes: 0

Views: 2604

Answers (2)

Stoian Nedev
Stoian Nedev

Reputation: 21

I hope it is not too late, but today I had the same problem and spent almost all of my day. So, I hope this will save some time to anyone else.

You can add className="MyDatePicker" for example:

<DatePicker
    showToolbar={false}
    views={["year", "month", "day"]}
    openTo="day"
    label="Day"
    maxDate={new Date()}
    value={v}
    onChange={setV}
    className="MyDatePicker"
/>

Then on the css file just add these classes:

.MyDatePicker fieldset.MuiOutlinedInput-notchedOutline {
    border: 2px solid #1976d2;
}
.MyDatePicker .Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
    border-color: #1976d2;
}

Upvotes: 0

ehsan0x
ehsan0x

Reputation: 670

Finally made it work by overriding --tw-ring-shadow from tailwind base. The answer @ed-lucas has given here worked for me too.

In the index.css added the following to override the default behavior.

input {
    --tw-ring-shadow: 0 0 #000 !important;
}

Upvotes: 0

Related Questions