diff --git a/ui/src/Pages/PeoplePage/PeoplePage.test.tsx b/ui/src/Pages/PeoplePage/PeoplePage.test.tsx
index dfe83b06..efef1f8c 100644
--- a/ui/src/Pages/PeoplePage/PeoplePage.test.tsx
+++ b/ui/src/Pages/PeoplePage/PeoplePage.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import PeoplePage, {
   FaceDetails,
+  FaceGroup,
   MY_FACES_QUERY,
   SET_GROUP_LABEL_MUTATION,
 } from './PeoplePage'
@@ -198,11 +199,9 @@ describe('FaceDetails component', () => {
     ]
     render(
       <MockedProvider mocks={graphqlMocks} addTypename={false}>
-        <FaceDetails
-          editLabel={false}
-          setEditLabel={jest.fn()}
-          group={faceGroup}
-        />
+        <MemoryRouter>
+          <FaceGroup group={faceGroup} />
+        </MemoryRouter>
       </MockedProvider>
     )
 
@@ -223,4 +222,30 @@ describe('FaceDetails component', () => {
       expect(graphqlMocks[0].newData).toHaveBeenCalled()
     })
   })
+
+  test('cancel add label to face group', async () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <MemoryRouter>
+          <FaceGroup group={faceGroup} />
+        </MemoryRouter>
+      </MockedProvider>
+    )
+
+    const btn = screen.getByRole('button')
+    expect(btn).toBeInTheDocument()
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    expect(screen.queryByText('Unlabeled')).toBeInTheDocument()
+
+    fireEvent.click(btn)
+
+    const input = screen.getByRole('textbox')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveValue('')
+
+    fireEvent.change(input, { target: { value: 'John Doe' } })
+    fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' })
+
+    expect(screen.queryByText('Unlabeled')).toBeInTheDocument()
+  })
 })
diff --git a/ui/src/Pages/PeoplePage/PeoplePage.tsx b/ui/src/Pages/PeoplePage/PeoplePage.tsx
index 7d2f1b22..79bab3c0 100644
--- a/ui/src/Pages/PeoplePage/PeoplePage.tsx
+++ b/ui/src/Pages/PeoplePage/PeoplePage.tsx
@@ -193,7 +193,7 @@ type FaceGroupProps = {
   group: myFaces_myFaceGroups
 }
 
-const FaceGroup = ({ group }: FaceGroupProps) => {
+export const FaceGroup = ({ group }: FaceGroupProps) => {
   const previewFace = group.imageFaces[0]
   const [editLabel, setEditLabel] = useState(false)
 
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.js b/ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.js
similarity index 94%
rename from ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.js
rename to ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.js
index 7ec5f15f..5af8df91 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.js
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import { MetadataInfo } from './MediaSidebar'
+import ExifDetails from './MediaSidebarExif'
 
-describe('MetadataInfo', () => {
+describe('ExifDetails', () => {
   test('without EXIF information', async () => {
     const media = {
       id: '1730',
@@ -25,7 +25,7 @@ describe('MetadataInfo', () => {
       __typename: 'Media',
     }
 
-    render(<MetadataInfo media={media} />)
+    render(<ExifDetails media={media} />)
 
     expect(screen.queryByText('Camera')).not.toBeInTheDocument()
     expect(screen.queryByText('Maker')).not.toBeInTheDocument()
@@ -61,7 +61,7 @@ describe('MetadataInfo', () => {
       __typename: 'Media',
     }
 
-    render(<MetadataInfo media={media} />)
+    render(<ExifDetails media={media} />)
 
     expect(screen.getByText('Camera')).toBeInTheDocument()
     expect(screen.getByText('Canon EOS R')).toBeInTheDocument()