Animation Not Working in Safari

[ankur-kunaico]

Using it with FocusTrap

header: {
    opacity: 0,
    [theme.breakpoints.up('xl')]: {
      '& .react-modal-sheet-header': {
        height: '32px !important',
      },
      '& + .react-modal-sheet-content': {
        flex: '0 1 auto !important',
        overflow: 'visible !important',
      },
    },
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    height: '100%',
    [theme.breakpoints.up('xl')]: {
      flexDirection: 'row',
      flexWrap: 'wrap',
    },

<Sheet
        isOpen={props.isOpen}
        onClose={() => props.setOpen(false)}
        snapPoints={width > widthBreakpoint ? [195] : [600]}>
        <Sheet.Container>
          <Sheet.Header className={classes.header} />
          <FocusTrap active={props.isOpen}>
            <Sheet.Content>
         {...Content}
            </Sheet.Content>
          </FocusTrap>
        </Sheet.Container>
        <Sheet.Backdrop />
      </Sheet>

Without Focus Trap Its working as expected

[Temzasse]

Interesting 🤔 This is probably due to the fact that I'm mapping over the children and passing them a custom key for AnimatePresence to work properly.

Can you try to put the FocusTrap between Sheet and SheetContainer? I'm doing that in my A11ySheet demo and worked okay.

const Example = () => {
  return (
    <Sheet>
      <FocusTrap>
        <SheetContainer>
          /* ...content... */
        </SheetContainer>
      </FocusTrap>
    </Sheet>
  );
}

[stephanschubert]

@Temzasse I'm using your A11ySheet example but got the same issue.. but removing restoreFocus "fixes" it. Any idea what the culprit could be?

EDIT Just realized FocusScope is from another library https://github.com/adobe/react-spectrum.