Changing the focal point of an image doesn't update it in live preview

[notflip]

Hi everyone,
I noticed that changing the focal point of an image doesn't update it in live preview, I have to reopen the live preview or refresh the page. Is there any way to force this?

[apoorva-01]

The focal point never reaches your rendered image, so there's nothing for live preview to update.

Focal point isn't applied on the frontend. It's an input to sharp, and sharp only reruns when the file is (re)processed, i.e. on save. So the cropped/resized files under doc.sizes.*.url are baked at upload/save time. Moving the point in the admin doesn't regenerate them, and their URLs don't change either, so the browser has no reason to refetch. Live preview is pushing the new value to you every keystroke, it's just pushing the number, not a new image.

The number is focalX / focalY on the doc (0 to 100, percentages). So if you render the image yourself from those instead of leaning on a pre-cropped size, it moves live:

<img
  src={doc.url}                       // original, not a pre-generated size
  style={{
    objectFit: 'cover',
    objectPosition: `${doc.focalX ?? 50}% ${doc.focalY ?? 50}%`,
  }}
/>

Now dragging the focal point repositions instantly because focalX/focalY come through live preview like any other field. Save when you're happy and sharp bakes the same point into the actual sizes crops for production.