css style fixes and replace useEffect

Author: KoolADE85

components/dash-core-components/src/components/css/calendar.css

@@ -19,6 +19,8 @@
     border-radius: 4px;
     cursor: default;
     user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
     width: var(--day-size, 36px);
     height: var(--day-size, 36px);
 }

components/dash-core-components/src/components/css/datepickers.css

@@ -2,9 +2,8 @@
     display: block;
     flex: 1;
     box-sizing: border-box;
-    margin: calc(var(--Dash-Spacing) * 2) 0;
+    background: var(--Dash-Fill-Inverse-Strong);
     padding: 0;
-    background: inherit;
     border: none;
     outline: none;
     width: 100%;
@@ -49,11 +48,18 @@
 }
 
 .dash-datepicker-input {
-    height: 34px;
+    height: 32px;
     width: fit-content;
     border: none;
     outline: none;
     border-radius: 4px;
+    padding: 0;
+    background-color: inherit;
+}
+
+.dash-datepicker-input::selection,
+.dash-datepicker-input::-webkit-selection {
+    background: var(--Dash-Fill-Weak);
 }
 
 .dash-datepicker-input-wrapper:focus-within {

components/dash-core-components/src/fragments/DatePickerRange.tsx

@@ -148,17 +148,6 @@ const DatePickerRange = ({
         }
     }, [start_date, internalStartDate, end_date, internalEndDate, updatemode]);
 
-    useEffect(() => {
-        // Keeps focus on the component when the calendar closes
-        if (!isCalendarOpen) {
-            if (!startInputValue) {
-                startInputRef.current?.focus();
-            } else {
-                endInputRef.current?.focus();
-            }
-        }
-    }, [isCalendarOpen, startInputValue]);
-
     const sendStartInputAsDate = useCallback(
         (focusCalendar = false) => {
             if (startInputValue) {
@@ -412,6 +401,24 @@ const DatePickerRange = ({
                         align="start"
                         sideOffset={5}
                         onOpenAutoFocus={e => e.preventDefault()}
+                        onCloseAutoFocus={e => {
+                            e.preventDefault();
+                            // Only focus if focus is not already on one of the inputs
+                            const inputs: (Element | null)[] = [
+                                startInputRef.current,
+                                endInputRef.current,
+                            ];
+                            if (inputs.includes(document.activeElement)) {
+                                return;
+                            }
+
+                            // Keeps focus on the component when the calendar closes
+                            if (!startInputValue) {
+                                startInputRef.current?.focus();
+                            } else {
+                                endInputRef.current?.focus();
+                            }
+                        }}
                     >
                         <Calendar
                             ref={calendarRef}

components/dash-core-components/src/fragments/DatePickerSingle.tsx

@@ -77,8 +77,6 @@ const DatePickerSingle = ({
         }
     }, [date, internalDate, setProps]);
 
-    useEffect(() => inputRef.current?.focus(), [isCalendarOpen]);
-
     const parseUserInput = useCallback(
         (focusCalendar = false) => {
             if (inputValue === '') {
@@ -207,6 +205,13 @@ const DatePickerSingle = ({
                         align="start"
                         sideOffset={5}
                         onOpenAutoFocus={e => e.preventDefault()}
+                        onCloseAutoFocus={e => {
+                            e.preventDefault();
+                            // Only focus if focus is not already on the input
+                            if (document.activeElement !== inputRef.current) {
+                                inputRef.current?.focus();
+                            }
+                        }}
                     >
                         <Calendar
                             ref={calendarRef}

components/dash-core-components/src/utils/calendar/Calendar.tsx

@@ -294,6 +294,7 @@ const CalendarComponent = ({
         >
             <div className="dash-datepicker-controls">
                 <button
+                    type="button"
                     className="dash-datepicker-month-nav"
                     onClick={() => changeMonthBy(-1)}
                     disabled={!canChangeMonthBy(-1)}
@@ -327,6 +328,7 @@ const CalendarComponent = ({
                     }}
                 />
                 <button
+                    type="button"
                     className="dash-datepicker-month-nav"
                     onClick={() => changeMonthBy(1)}
                     disabled={!canChangeMonthBy(1)}