From cbef07223613a6f1d59f4035dbfc6dd1598129ba Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Fri, 19 Jun 2020 07:19:30 +1000
Subject: [PATCH] Custom select control: don't announce external value changes
 (#22815)

* Don't announce external value change

* Correct aria attributes

* Improve value equality checking.

* Selected item doesn't always exist

* Check if value exists and add default

* Fix initial selection

* Memoize getSelectOptions instead

* Switch to useMemo
---
 packages/components/src/font-size-picker/index.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 43c3d75f5cda3..70a97782ccad3 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { textColor } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,6 +28,9 @@ function getSelectValueFromFontSize( fontSizes, value ) {
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
+	if ( disableCustomFontSizes && ! optionsArray.length ) {
+		return null;
+	}
 	optionsArray = [
 		{ slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) },
 		...optionsArray,
@@ -51,12 +55,15 @@ export default function FontSizePicker( {
 } ) {
 	const instanceId = useInstanceId( FontSizePicker );
 
-	if ( disableCustomFontSizes && ! fontSizes.length ) {
+	const options = useMemo(
+		() => getSelectOptions( fontSizes, disableCustomFontSizes ),
+		[ fontSizes, disableCustomFontSizes ]
+	);
+
+	if ( ! options ) {
 		return null;
 	}
 
-	const options = getSelectOptions( fontSizes, disableCustomFontSizes );
-
 	const selectedFontSizeSlug = getSelectValueFromFontSize( fontSizes, value );
 
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;