Merge branch 'dev' into issue/666

src/dashboardWebView/components/Media/Item.tsx

@@ -42,10 +42,12 @@ import { LocalizationKey } from '../../../localization';
 
 export interface IItemProps {
   media: MediaInfo;
+  index: number;
 }
 
 export const Item: React.FunctionComponent<IItemProps> = ({
-  media
+  media,
+  index
 }: React.PropsWithChildren<IItemProps>) => {
   const [, setLightbox] = useRecoilState(LightboxAtom);
   const [showAlert, setShowAlert] = useState(false);
@@ -66,7 +68,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
   const [referenceElement, setReferenceElement] = useState<any>(null);
   const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
     placement: 'bottom-end',
     strategy: 'fixed'
   });
@@ -400,6 +402,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     setMediaData(undefined);
   };
 
+  useEffect(() => {
+    if (update) {
+      update();
+    }
+  }, [update, index]);
+
   useEffect(() => {
     const name = basename(parseWinPath(media.fsPath) || '');
     if (name !== filename) {

src/dashboardWebView/components/Media/Media.tsx

@@ -250,8 +250,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
         )}
 
         <List>
-          {allMedia.map((file) => (
-            <Item key={file.fsPath} media={file} />
+          {allMedia.map((file, idx) => (
+            <Item key={file.fsPath} media={file} index={idx} />
           ))}
         </List>
       </div>