From dafc773dc159d58b84f0ab5668a423136f0e9e0d Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Tue, 14 Nov 2023 17:43:47 +0900
Subject: [PATCH] fix(web): feature unselection

---
 web/src/beta/lib/core/Map/Layers/hooks.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/web/src/beta/lib/core/Map/Layers/hooks.ts b/web/src/beta/lib/core/Map/Layers/hooks.ts
index 0e3cec34f2..8c34a19b73 100644
--- a/web/src/beta/lib/core/Map/Layers/hooks.ts
+++ b/web/src/beta/lib/core/Map/Layers/hooks.ts
@@ -821,7 +821,8 @@ function useSelection({
         layerId?: string;
         featureId?: string[];
       }[],
-    ) => {
+    ): boolean => {
+      let shouldUpdate = false;
       for (const { layerId, featureId } of layers) {
         if (!layerId || !featureId) continue;
 
@@ -838,13 +839,14 @@ function useSelection({
 
         if (featureId.length) {
           engineRef?.current?.selectFeatures(layerId, featureId);
-          updateStyle(layerId);
           selectedFeatureIds.current[selectedFeatureIdsIndex].featureIds =
             selectedFeatureIds.current[selectedFeatureIdsIndex].featureIds.concat(featureId);
+          shouldUpdate = true;
         }
       }
+      return shouldUpdate;
     },
-    [engineRef, updateStyle],
+    [engineRef],
   );
 
   const selectFeatures = useCallback(
@@ -856,16 +858,26 @@ function useSelection({
       options?: LayerSelectionReason,
       info?: SelectedFeatureInfo,
     ) => {
+      let shouldUpdate = false;
       selectedFeatureIds.current.forEach(id => {
         engineRef?.current?.unselectFeatures(id.layerId, id.featureIds);
-        updateStyle(id.layerId);
+        shouldUpdate = true;
       });
 
+      const prevSelectedFeatureIds = selectedFeatureIds.current;
       selectedFeatureIds.current = [];
 
       updateSelectedLayerForFeature(layers, options, info);
 
-      updateEngineFeatures(layers);
+      shouldUpdate = updateEngineFeatures(layers) || shouldUpdate;
+
+      if (!shouldUpdate) return;
+
+      for (const { layerId } of [...layers, ...prevSelectedFeatureIds]) {
+        if (!layerId) continue;
+        // Wait 1 frame for cesium to synchronize the updated value.
+        requestAnimationFrame(() => updateStyle(layerId));
+      }
     },
     [engineRef, updateStyle, updateEngineFeatures, updateSelectedLayerForFeature],
   );