Make Dialog compatible with react autoFocus

[viridia]

The current method of handling initial focus in Headless UI is awkward to use, because it involves getting a 'ref' of a child element. It's much more convenient to use the React standard method, which is the 'autoFocus' attribute that can be placed on any focusable child; this decouples the child from the dialog (i.e. the focusable child doesn't need to be written in a way that knows that it's inside of a dialog).

React's autoFocus property works differently than most attributes - it doesn't set anything on the DOM, the existence of the autoFocus prop causes react to call .focus() after rendering.

Unfortunately, the headless UI breaks autoFocus - even if the initialFocus attribute is not set, it still forces focus on the first element, overriding whatever focus React had set.

My suggestion is for a way to disable the headlessui focus behavior entirely and just let React do its thing. Perhaps by passing initialFocus={null} or some other special value.