diff --git a/web/src/components/Calender.jsx b/web/src/components/Calender.jsx index fa84676ec..e6639cba1 100644 --- a/web/src/components/Calender.jsx +++ b/web/src/components/Calender.jsx @@ -189,11 +189,11 @@ const Calender = ({ onChange, calenderRef }) => { ${isFirstDayInRange(day) ? ' rounded-l-xl ' : ''} ${isSelectedRange(day) ? ' bg-blue-500 dark:hover:bg-blue-600' : ''} ${isLastDayInRange(day) ? ' rounded-r-xl ' : ''} - ${isCurrentDay(day) ? 'rounded-full bg-gray-100 dark:hover:bg-gray-100 ' : ''}`} + ${isCurrentDay(day) && !isLastDayInRange(day) ? 'rounded-full bg-gray-100 dark:hover:bg-gray-100 ' : ''}`} key={index} > -
- {day.date} +
+ {day.date}
); diff --git a/web/src/components/Select.jsx b/web/src/components/Select.jsx index 504b5aef0..b4c282d8e 100644 --- a/web/src/components/Select.jsx +++ b/web/src/components/Select.jsx @@ -68,7 +68,7 @@ export default function Select({ ) ); } - }, [inputOptions, propSelected, setSelected]); + }, [type, options, inputOptions, propSelected, setSelected]); const [focused, setFocused] = useState(null); const [showDatePicker, setShowDatePicker] = useState(false); @@ -91,7 +91,7 @@ export default function Select({ onChange && onChange(range, 'range'); setShowMenu(false); }, - [onChange, options] + [onChange] ); const handleClick = useCallback(() => { @@ -135,7 +135,16 @@ export default function Select({ setShowMenu(false); }, [setShowMenu]); + const findDOMNodes = (component) => { + return (component && (component.base || (component.nodeType === 1 && component))) || null; + }; + useEffect(() => { + const addBackDrop = (e) => { + if (showDatePicker && !findDOMNodes(calenderRef.current).contains(e.target)) { + setShowDatePicker(false); + } + }; window.addEventListener('click', addBackDrop); // setDateToInput(state.selectedDay); return function cleanup() { @@ -143,16 +152,6 @@ export default function Select({ }; }, [showDatePicker]); - const findDOMNode = (component) => { - return (component && (component.base || (component.nodeType === 1 && component))) || null; - }; - - const addBackDrop = (e) => { - if (showDatePicker && !findDOMNode(calenderRef.current).contains(e.target)) { - setShowDatePicker(false); - } - }; - switch (type) { case 'datepicker': return ( diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index 12a0ddea0..70816fe00 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -307,7 +307,7 @@ function Filter({ onChange, searchParams, paramName, options, type, ...rest }) { [searchParams, paramName, onChange] ); - let obj = {}; + const obj = {}; paramName.map((p) => Object.assign(obj, { [p]: searchParams.get(p) }), [searchParams]); return ( diff --git a/web/src/routes/Events/components/filter.jsx b/web/src/routes/Events/components/filter.jsx index 775682b8d..923070d95 100644 --- a/web/src/routes/Events/components/filter.jsx +++ b/web/src/routes/Events/components/filter.jsx @@ -19,7 +19,7 @@ function Filter({ onChange, searchParams, paramName, options, type, ...rest }) { [searchParams, paramName, onChange] ); - let obj = {}; + const obj = {}; paramName.map((p) => Object.assign(obj, { [p]: searchParams.get(p) }), [searchParams]); return ( diff --git a/web/src/routes/Events/components/filterable.jsx b/web/src/routes/Events/components/filterable.jsx index 9c7cd6882..35018fadb 100644 --- a/web/src/routes/Events/components/filterable.jsx +++ b/web/src/routes/Events/components/filterable.jsx @@ -15,7 +15,7 @@ function Filterable({ onFilter, pathname, searchParams, paramName, name }) { params.set(paramName, name); removeDefaultSearchKeys(params); return `${pathname}?${params.toString()}`; - }, [searchParams, paramName, pathname, name]); + }, [searchParams, paramName, pathname, name, removeDefaultSearchKeys]); const handleClick = useCallback( (event) => {