diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index 673f84c04bd4c..c6b68b7e94409 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -13,12 +13,6 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
 import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
 import { i18n } from '@kbn/i18n';
 
-function getDefaultColorMapType(fieldType) {
-  return CATEGORICAL_DATA_TYPES.includes(fieldType)
-    ? COLOR_MAP_TYPE.CATEGORICAL
-    : COLOR_MAP_TYPE.ORDINAL;
-}
-
 export function DynamicColorForm({
   fields,
   onDynamicStyleChange,
@@ -47,7 +41,9 @@ export function DynamicColorForm({
 
   const onFieldChange = async ({ field }) => {
     const { name, origin, type: fieldType } = field;
-    const defaultColorMapType = getDefaultColorMapType(fieldType);
+    const defaultColorMapType = CATEGORICAL_DATA_TYPES.includes(fieldType)
+      ? COLOR_MAP_TYPE.CATEGORICAL
+      : COLOR_MAP_TYPE.ORDINAL;
     onDynamicStyleChange(styleProperty.getStyleName(), {
       ...styleOptions,
       field: { name, origin },
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
index 7cf80e1f792d6..92146ba3006fc 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
@@ -33,7 +33,7 @@ export class VectorStyleEditor extends Component {
     dateFields: [],
     numberFields: [],
     fields: [],
-    styleableFields: [],
+    ordinalAndCategoricalFields: [],
     defaultDynamicProperties: getDefaultDynamicProperties(),
     defaultStaticProperties: getDefaultStaticProperties(),
     supportedFeatures: undefined,
@@ -70,25 +70,19 @@ export class VectorStyleEditor extends Component {
     const fieldPromises = fields.map(getFieldMeta);
     const fieldsArrayAll = await Promise.all(fieldPromises);
     if (this._isMounted && !_.isEqual(fieldsArrayAll, this.state.fields)) {
-      this.setState({ fields: fieldsArrayAll });
+      return;
     }
 
-    const styleableFields = fieldsArrayAll.filter(field => {
-      return CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type);
+    this.setState({
+      fields: fieldsArrayAll,
+      ordinalAndCategoricalFields: fieldsArrayAll.filter(field => {
+        return (
+          CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type)
+        );
+      }),
+      dateFields: fieldsArrayAll.filter(field => field.type === 'date'),
+      numberFields: fieldsArrayAll.filter(field => field.type === 'number'),
     });
-    if (this._isMounted && !_.isEqual(styleableFields, this.state.styleableFields)) {
-      this.setState({ styleableFields: styleableFields });
-    }
-
-    const dateFieldsArray = styleableFields.filter(field => field.type === 'date');
-    if (this._isMounted && !_.isEqual(dateFieldsArray, this.state.dateFields)) {
-      this.setState({ dateFields: dateFieldsArray });
-    }
-
-    const numberFieldsArray = styleableFields.filter(field => field.type === 'number');
-    if (this._isMounted && !_.isEqual(numberFieldsArray, this.state.numberFields)) {
-      this.setState({ numberFields: numberFieldsArray });
-    }
   }
 
   async _loadSupportedFeatures() {
@@ -166,7 +160,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.FILL_COLOR]}
-        fields={this.state.styleableFields}
+        fields={this.state.ordinalAndCategoricalFields}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.FILL_COLOR].options
         }
@@ -187,7 +181,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_COLOR]}
-        fields={this.state.styleableFields}
+        fields={this.state.ordinalAndCategoricalFields}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.LINE_COLOR].options
         }
@@ -243,7 +237,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_COLOR]}
-          fields={this.state.styleableFields}
+          fields={this.state.ordinalAndCategoricalFields}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_COLOR].options
           }
@@ -276,7 +270,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_COLOR]}
-          fields={this.state.styleableFields}
+          fields={this.state.ordinalAndCategoricalFields}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
           }
@@ -329,7 +323,7 @@ export class VectorStyleEditor extends Component {
             onStaticStyleChange={this._onStaticStyleChange}
             onDynamicStyleChange={this._onDynamicStyleChange}
             styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON]}
-            fields={this.state.styleableFields}
+            fields={this.state.ordinalAndCategoricalFields}
             defaultStaticStyleOptions={
               this.state.defaultStaticProperties[VECTOR_STYLES.ICON].options
             }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
index b4c3a6c69773e..5b286e4ba120e 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
@@ -237,7 +237,7 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => {
   });
 });
 
-test('Should read out categorical type correctly', async () => {
+test('isCategorical should return true when type is categorical', async () => {
   const categoricalColorStyle = makeProperty({
     type: COLOR_MAP_TYPE.CATEGORICAL,
     colorCategory: 'palette_0',
@@ -247,7 +247,7 @@ test('Should read out categorical type correctly', async () => {
   expect(categoricalColorStyle.isCategorical()).toEqual(true);
 });
 
-test('Should read out ordinal correctly when type===undefined', async () => {
+test('isOrdinal should return true when type is ordinal', async () => {
   const ordinalColorStyle = makeProperty({
     type: undefined,
     color: 'Blues',