UX improvement: don't autofocus on Custom properties on dashboard (#3872)

* UX improvement: don't autofocus on Custom properties on dashboard

Currently when you visit the dashboard with a certain configuration,
it will automatically scroll to the bottom, which is annoying.

To reproduce:
1. localStorage.clear() in console
2. Refresh, open properties at the very bottom
3. Refresh again

Expected behavior:
1. Dashboard shows

Actual behavior:
1. Dashboard scrolls to the bottom

* Changelog entry

CHANGELOG.md

@@ -65,6 +65,7 @@ All notable changes to this project will be documented in this file.
 - Allow custom event timeseries in stats API plausible/analytics#3505
 - Fixes for sites with UTF characters in domain plausible/analytics#3560
 - Fix crash when using special characters in filter plausible/analytics#3634
+- Fix automatic scrolling to the bottom on the dashboard if previously selected properties tab plausible/analytics#3872
 - Allow running the container with arbitrary UID plausible/analytics#2986
 
 ## v2.0.0 - 2023-07-12

assets/js/dashboard/components/combobox.js

@@ -159,10 +159,10 @@ export default function PlausibleCombobox(props) {
   }, [])
 
   useEffect(() => {
-    if (props.singleOption && props.values.length === 0) {
+    if (props.singleOption && props.values.length === 0 && props.autoFocus) {
       searchRef.current.focus()
     }
-  }, [props.values.length === 0])
+  }, [props.values.length === 0, props.singleOption, props.autoFocus])
 
   const searchBoxClass = 'border-none py-1 px-0 w-full inline-block rounded-md focus:outline-none focus:ring-0 text-sm'
 

assets/js/dashboard/stats/modals/prop-filter-row.js

@@ -46,7 +46,8 @@ function PropFilterRow({
         <Combobox
           className="mr-2"
           fetchOptions={fetchPropKeyOptions()}
-          singleOption={true}
+          singleOption
+          autoFocus
           values={propKey ? [propKey] : []}
           onSelect={(value) => onPropKeySelect(id, value)}
           placeholder={'Property'}