Make autocomplete autoscroll on focus mobile only

We added an on focus autoscroll to the autocomplete fields to stop the dropdown menu being hidden behind the on screen keyboard. This works well on mobile but is annoying on desktop, so this makes the autoscroll only happen on smaller sizes. I also moved the autoscroll functionality into a composable as it's shared between 3 fields. Ticket: https://phabricator.wikimedia.org/T374419
wmde · Sep 13, 2024 · ea52ef7 · ea52ef7
1 parent 8265a48
commit ea52ef7
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 24 deletions.
diff --git a/src/components/shared/form_fields/CityAutocompleteField.vue b/src/components/shared/form_fields/CityAutocompleteField.vue
@@ -54,6 +54,7 @@ import { CityAutocompleteResource, NullCityAutocompleteResource } from '@src/api
 import TextFormInput from '@src/components/shared/form_elements/TextFormInput.vue';
 import { updateAutocompleteScrollPosition } from '@src/components/shared/form_fields/updateAutocompleteScrollPosition';
 import { useAriaDescribedby } from '@src/components/shared/form_fields/useAriaDescribedby';
+import { autoscrollMaxWidth, useAutocompleteScrollIntoViewOnFocus } from '@src/components/shared/form_fields/useAutocompleteScrollIntoViewOnFocus';
 
 enum InteractionState {
 	Typing,
@@ -85,6 +86,7 @@ const ariaDescribedby = useAriaDescribedby(
 	`${props.inputId}-error`,
 	computed<boolean>( () => props.showError )
 );
+const scrollIntoView = useAutocompleteScrollIntoViewOnFocus( props.scrollTargetId, autoscrollMaxWidth );
 
 const placeholder = computed( () => {
 	if ( cities.value.length > 0 ) {
@@ -93,13 +95,6 @@ const placeholder = computed( () => {
 	return 'form_for_example';
 } );
 
-const scrollIntoView = (): void => {
-	const scrollIntoViewElement = document.getElementById( props.scrollTargetId );
-	if ( scrollIntoViewElement ) {
-		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
-	}
-};
-
 const onFocus = ( event: Event ) => {
 	autocompleteIsActive.value = true;
 	scrollIntoView();

diff --git a/src/components/shared/form_fields/CountryAutocompleteField.vue b/src/components/shared/form_fields/CountryAutocompleteField.vue
@@ -58,6 +58,7 @@ import TextFormInput from '@src/components/shared/form_elements/TextFormInput.vu
 import { computed, nextTick, ref } from 'vue';
 import { updateAutocompleteScrollPosition } from '@src/components/shared/form_fields/updateAutocompleteScrollPosition';
 import { useAriaDescribedby } from '@src/components/shared/form_fields/useAriaDescribedby';
+import { autoscrollMaxWidth, useAutocompleteScrollIntoViewOnFocus } from '@src/components/shared/form_fields/useAutocompleteScrollIntoViewOnFocus';
 
 enum InteractionState {
 	Typing,
@@ -94,18 +95,12 @@ const ariaDescribedby = useAriaDescribedby(
 	`${props.inputId}-error`,
 	computed<boolean>( () => props.showError )
 );
+const scrollIntoView = useAutocompleteScrollIntoViewOnFocus( props.scrollTargetId, autoscrollMaxWidth );
 
 const isFirstFocusOnDefaultValue = (): boolean => {
 	return !wasFocusedBefore.value && !props.wasRestored;
 };
 
-const scrollIntoView = (): void => {
-	const scrollIntoViewElement = document.getElementById( props.scrollTargetId );
-	if ( scrollIntoViewElement ) {
-		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
-	}
-};
-
 const onFocus = ( event: Event ) => {
 	if ( isFirstFocusOnDefaultValue() ) {
 		countryName.value = '';

diff --git a/src/components/shared/form_fields/StreetAutocompleteField.vue b/src/components/shared/form_fields/StreetAutocompleteField.vue
@@ -79,6 +79,7 @@ import { useStreetsResource } from '@src/components/shared/form_fields/useStreet
 import TextFormInput from '@src/components/shared/form_elements/TextFormInput.vue';
 import { updateAutocompleteScrollPosition } from '@src/components/shared/form_fields/updateAutocompleteScrollPosition';
 import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPlaceholderWarning.vue';
+import { autoscrollMaxWidth, useAutocompleteScrollIntoViewOnFocus } from '@src/components/shared/form_fields/useAutocompleteScrollIntoViewOnFocus';
 
 enum InteractionState {
 	Typing,
@@ -112,6 +113,7 @@ const ariaDescribedby = useAriaDescribedby(
 	`${props.inputIdStreetName}-error`,
 	computed<boolean>( () => props.showError )
 );
+const scrollIntoView = useAutocompleteScrollIntoViewOnFocus( props.scrollTargetId, autoscrollMaxWidth );
 
 const filteredStreets = computed<Array<string>>( () => {
 	const streetList = streets.value.filter( ( streetItem: string ) => {
@@ -127,13 +129,6 @@ const onUpdateModel = (): void => {
 	emit( 'update:modelValue', joinStreetAndBuildingNumber( streetNameModel.value, buildingNumberModel.value ) );
 };
 
-const scrollIntoView = (): void => {
-	const scrollIntoViewElement = document.getElementById( props.scrollTargetId );
-	if ( scrollIntoViewElement ) {
-		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
-	}
-};
-
 const onStreetNameFocus = ( event: Event ) => {
 	autocompleteIsActive.value = true;
 	scrollIntoView();

diff --git a/src/components/shared/form_fields/useAutocompleteScrollIntoViewOnFocus.ts b/src/components/shared/form_fields/useAutocompleteScrollIntoViewOnFocus.ts
@@ -0,0 +1,15 @@
+export const autoscrollMaxWidth = 769;
+
+export function useAutocompleteScrollIntoViewOnFocus( target: string, maxWidth: number ): () => void {
+	return (): void => {
+
+		if ( window.innerWidth > maxWidth ) {
+			return;
+		}
+
+		const scrollIntoViewElement = document.getElementById( target );
+		if ( scrollIntoViewElement ) {
+			scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
+		}
+	};
+}
diff --git a/tests/unit/components/shared/form_fields/CityAutocompleteField.spec.ts b/tests/unit/components/shared/form_fields/CityAutocompleteField.spec.ts
@@ -231,11 +231,21 @@ describe( 'CityAutocompleteField.vue', () => {
 		expect( field.attributes( 'aria-describedby' ) ).toStrictEqual( 'city-selected city-error' );
 	} );
 
-	it( 'scrolls field into view when focused', async () => {
+	it( 'scrolls field into view on small size when focused', async () => {
 		const wrapper = getWrapper();
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 769 } );
 
 		await wrapper.find<HTMLInputElement>( '#city' ).trigger( 'focus' );
 
 		expect( scrollElement.scrollIntoView ).toHaveBeenCalled();
 	} );
+
+	it( 'does not scroll field into view on large size when focused', async () => {
+		const wrapper = getWrapper();
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 770 } );
+
+		await wrapper.find<HTMLInputElement>( '#city' ).trigger( 'focus' );
+
+		expect( scrollElement.scrollIntoView ).not.toHaveBeenCalled();
+	} );
 } );
diff --git a/tests/unit/components/shared/form_fields/CountryAutocompleteField.spec.ts b/tests/unit/components/shared/form_fields/CountryAutocompleteField.spec.ts
@@ -288,11 +288,21 @@ describe( 'CountryAutocompleteField.vue', () => {
 		expect( field.attributes( 'aria-describedby' ) ).toStrictEqual( 'country-selected country-error' );
 	} );
 
-	it( 'scrolls field into view when focused', async () => {
+	it( 'scrolls field into view on small size when focused', async () => {
 		const wrapper = getWrapper();
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 769 } );
 
 		await wrapper.find<HTMLInputElement>( '#country' ).trigger( 'focus' );
 
 		expect( scrollElement.scrollIntoView ).toHaveBeenCalled();
 	} );
+
+	it( 'does not scroll field into view on large size when focused', async () => {
+		const wrapper = getWrapper();
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 770 } );
+
+		await wrapper.find<HTMLInputElement>( '#country' ).trigger( 'focus' );
+
+		expect( scrollElement.scrollIntoView ).not.toHaveBeenCalled();
+	} );
 } );
diff --git a/tests/unit/components/shared/form_fields/StreetAutocompleteField.spec.ts b/tests/unit/components/shared/form_fields/StreetAutocompleteField.spec.ts
@@ -265,11 +265,21 @@ describe( 'StreetAutocompleteField.vue', () => {
 		expect( field.attributes( 'aria-describedby' ) ).toStrictEqual( 'street-selected street-error' );
 	} );
 
-	it( 'scrolls field into view when focused', async () => {
+	it( 'scrolls field into view on small size when focused', async () => {
 		const wrapper = getWrapper( '', '12345' );
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 769 } );
 
 		await wrapper.find<HTMLInputElement>( '#street' ).trigger( 'focus' );
 
 		expect( scrollElement.scrollIntoView ).toHaveBeenCalled();
 	} );
+
+	it( 'does not scroll field into view on large size when focused', async () => {
+		const wrapper = getWrapper( '', '12345' );
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 770 } );
+
+		await wrapper.find<HTMLInputElement>( '#street' ).trigger( 'focus' );
+
+		expect( scrollElement.scrollIntoView ).not.toHaveBeenCalled();
+	} );
 } );