diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
index 5e79bebba2cf3..124c2bf0cff55 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
@@ -58,6 +58,7 @@ export const ColorStopsCategorical = ({
 
     return (
       <StopInput
+        key={field.getName()} // force new component instance when field changes
         field={field}
         getValueSuggestions={getValueSuggestions}
         value={stopValue}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
index a8528a5d943b9..d12a3d77d0b29 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
@@ -23,11 +23,6 @@ export class StopInput extends Component {
 
   componentDidMount() {
     this._isMounted = true;
-    this._prevFieldName = undefined;
-    this._loadFieldDataType();
-  }
-
-  componentDidUpdate() {
     this._loadFieldDataType();
   }
 
@@ -37,11 +32,6 @@ export class StopInput extends Component {
   }
 
   async _loadFieldDataType() {
-    if (this.props.field.getName() === this._prevFieldName) {
-      return;
-    }
-
-    this._prevFieldName = this.props.field.getName();
     const fieldDataType = await this.props.field.getDataType();
     if (this._isMounted) {
       this.setState({ fieldDataType });
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_stops.js
index 5807299ee99ed..4475af65be2e2 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_stops.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_stops.js
@@ -100,6 +100,7 @@ export function IconStops({
         />
       ) : (
         <StopInput
+          key={field.getName()} // force new component instance when field changes
           field={field}
           getValueSuggestions={getValueSuggestions}
           value={stop}