fix: default languages

src/components/InternationalizedArray.tsx

@@ -108,19 +108,24 @@ export default function InternationalizedArray(
   const {isDeleting} = useDocumentPane()
 
   const addedLanguages = members.map(({key}) => key)
-  const hasAddedDefaultLanguages = defaultLanguages.every((language) =>
-    addedLanguages.includes(language)
-  )
+  const hasAddedDefaultLanguages = defaultLanguages
+    .filter((language) => languages.find((l) => l.id === language))
+    .every((language) => addedLanguages.includes(language))
 
   useEffect(() => {
     if (!isDeleting && !hasAddedDefaultLanguages) {
-      handleAddLanguage(defaultLanguages)
+      const languagesToAdd = defaultLanguages
+        .filter((language) => !addedLanguages.includes(language))
+        .filter((language) => languages.find((l) => l.id === language))
+      handleAddLanguage(languagesToAdd)
     }
   }, [
     isDeleting,
     hasAddedDefaultLanguages,
     handleAddLanguage,
     defaultLanguages,
+    addedLanguages,
+    languages,
   ])
 
   // TODO: This is reordering and re-setting the whole array, it could be surgical

src/components/InternationalizedInput.tsx

@@ -9,6 +9,8 @@ import {
   MenuItem,
   Spinner,
   Stack,
+  Text,
+  Tooltip,
 } from '@sanity/ui'
 import type React from 'react'
 import {useCallback, useMemo} from 'react'
@@ -46,7 +48,8 @@ export default function InternationalizedInput(
   const {validation, value, onChange, readOnly} = inlineProps
 
   // The parent array contains the languages from the plugin config
-  const {languages, languageDisplay} = useInternationalizedArrayContext()
+  const {languages, languageDisplay, defaultLanguages} =
+    useInternationalizedArrayContext()
 
   const languageKeysInUse = useMemo(
     () => parentValue?.map((v) => v._key) ?? [],
@@ -89,6 +92,8 @@ export default function InternationalizedInput(
       ? getLanguageDisplay(languageDisplay, language.title, language.id)
       : ''
 
+  const isDefault = defaultLanguages.includes(value._key)
+
   return (
     <Card paddingTop={2} tone={getToneFromValidation(validation)}>
       <Stack space={2}>
@@ -126,13 +131,27 @@ export default function InternationalizedInput(
           </Card>
 
           <Card tone="inherit">
-            <Button
-              mode="bleed"
-              icon={RemoveCircleIcon}
-              tone="critical"
-              disabled={readOnly}
-              onClick={handleUnset}
-            />
+            <Tooltip
+              content={
+                <Text muted size={1}>
+                  Can&apos;t remove default language
+                </Text>
+              }
+              fallbackPlacements={['right', 'left']}
+              placement="top"
+              portal
+              disabled={!isDefault}
+            >
+              <span>
+                <Button
+                  mode="bleed"
+                  icon={RemoveCircleIcon}
+                  tone="critical"
+                  disabled={readOnly || isDefault}
+                  onClick={handleUnset}
+                />
+              </span>
+            </Tooltip>
           </Card>
         </Flex>
       </Stack>