Cannot reorder items in array after publish

[torstah]

Items in array are not draggable after either restoring to an older version or sometimes after publish

To Reproduce

Steps to reproduce the behavior:

1. Create a fresh project using npm create sanity@latest -- --template clean --create-project "Sanity Project" --dataset production
2. Add this simple schema

import { defineField, defineType, defineArrayMember } from 'sanity'

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    {
      name: "tags",
      type: "array",
      title: "Tags for item",
      of: [{
        type: 'item',
        name: 'tag',
       
      }]
    },
  
  ],
  preview: {
    select: {
      title: 'title',
   
    },

  },
})

4. Edit things and refresh, sometimes the array sorting just stops working.
5. Seems like the app is re-rendering and I get this error: ArrayOfObjectsField.tsx:248 Neither the item you are moving nor the item you are moving to have a key. Cannot continue.

Expected behavior

Sorting should be possible

Screenshots Here is a video:

https://github.com/sanity-io/sanity/assets/296355/18d5ea62-6d3c-4c56-9d6c-ff97ae0a938c

Which versions of Sanity are you using?

@sanity/cli (global) 3.15.1 (latest: 3.20.0) @sanity/eslint-config-studio 3.0.1 (up to date) @sanity/vision 3.20.0 (up to date) sanity 3.20.0 (up to date)

What operating system are you using?

MacOS Sonoma, Macbook pro M1

Which versions of Node.js / npm are you running?

Run npm -v && node -v in the terminal and copy-paste the result here.

8.15.0 v16.17.0

I have also created this https://codesandbox.io/p/sandbox/clever-einstein-r696v9, but cannot reproduce the issue there. But happens consistently on my local machine, I'm going crazy!!

Sometimes I get this error before this happens:

react-dom.development.js:86 Warning: React does not recognize the withTooltipprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasewithtooltip instead. If you accidentally passed it from a parent component, remove it from the DOM element....

[torstah]

Also adding that i have tried this exact setup in a Chrome Incognito window, so without any extensions activated and a clean cache. Same bug...

[torstah]

Any news on this? Could anyone reproduce? Thanks

[torstah]

Any news on this? Could anyone reproduce? Thanks

[HumidBrains]

I got the same problem with the reordering and it's strange this isn't getting any attention since at least I have had this issue since v3.17 up to the latest 3.20.2 I also had a conversation with a Sanity representative here that is about losing scroll on lists inside of dialogs after editing. I need to make a full page refresh after each edit and that goes for the reordering as well. To me, these problems seem to have the same cause. Unfortunately, I haven't gotten any reply in four days, which is strange as this bug makes the studio very hard to use.

[rexxars]

Having trouble reproducing this - what does the item type look like?

[torstah]

Item type could be what ever, same issue. For me anyways. Please review the video i posted above. Again the error message is: ArrayOfObjectsField.tsx:248 Neither the item you are moving nor the item you are moving to have a key. Cannot continue

[torstah]

Any news on this. Very frustrating having to change back and forth between documents to get sorting working again in the structure app. @rexxars

[HumidBrains]

@rexxars I've updated to 3.21.3 and still have the same problem. We're about to start building sites for clients with Sanity but if the UI is ignored to this extent it won't be possible to release the product to customers. That also goes for the modals that stop scrolling (when needed) after field edit and/or publish. This has been going on for a long time, and I cannot wrap my head around why such important bugs don't get prioritized.

[HumidBrains]

@rexxars I'm happy to let you into a studio with this problem for you to have a look.

[torstah]

@rexxars yes, happy to the same.

[salex97]

I also noticed this bug ~4 Months ago, hope that it gets fixed soon... whenever I reorder some sections in my pagebuilder array it needs a reload or document change to proceed working. Very frustrating...

[marcinincreo]

Experienced this right now, Sanity version 3.21.3

[HumidBrains]

@rexxars I just upgraded to the latest 3.23.2. The new UI looks a lot better, but the bug remains. It's about time to give this issue some love.

[torstah]

@rexxars Yes would really appreciate a solve for this.

[HumidBrains]

@rexxars this problem remains in version 3.25.0. Please show some interest in fixing this bug. Thanks.

[largis21]

For anyone looking at this in the future: This happens after the document has a syncing state, when the read-only components go back to the normal ones. This might actually be an issue with the dnd library as I'm not finding any issues.

function restrictToAxis(axis: Axis) {
  return axis === 'x' ? restrictToHorizontalAxis : restrictToVerticalAxis
}
function sortingStrategy(axis: Axis) {
  return axis === 'x' ? horizontalListSortingStrategy : verticalListSortingStrategy
}

const SortableList = memo(function SortableList(props: ListProps) {
  const {items, axis, onItemMove, onItemMoveStart, onItemMoveEnd, children, ...rest} = props

  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, SENSOR_OPTIONS))

  const handleDragEnd = useCallback(
    (event: DragEndEvent) => {
      const {active, over} = event

      if (active.id !== over?.id) {
        onItemMove?.({
          fromIndex: active.data.current?.sortable?.index,
          toIndex: over?.data.current?.sortable?.index,
        })
      }

      onItemMoveEnd?.()
    },
    [onItemMove, onItemMoveEnd],
  )
  const modifiers = useMemo(
    () => [restrictToParentElementWithMargins({y: 4}), ...(axis ? [restrictToAxis(axis)] : [])],
    [axis],
  )

  return (
    <DndContext
      sensors={sensors}
      autoScroll={AUTO_SCROLL_OPTIONS}
      modifiers={modifiers}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
      onDragStart={onItemMoveStart}
    >
      <SortableContext items={items} strategy={axis ? sortingStrategy(axis) : undefined}>
        <Grid {...rest}>{children}</Grid>
      </SortableContext>
    </DndContext>
  )
})

Tried removing the modifiers but that didn't work, same with the strategory on SortableContext

[alexandereneroth]

We have the same issue on version 3.30.0

[joulzMorguet]

I encountered the same issue. Every time I reorder my PageBuilder Components (Sanity Array) and publish, I am not able to reorder again and have to reload. Very frustrating and now the second project with this issue.

Currently I work with 3.25.0 but had the same problem in previous versions as well.

[github-actions[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.