Make close after the last element is tabbed out

This commit is contained in:
Brian J. Cardiff 2022-07-08 15:16:37 -03:00
parent 7a2c284eac
commit 97ead64d23
2 changed files with 23 additions and 1 deletions

View File

@ -63,6 +63,7 @@ import Nri.Ui.Html.V3 exposing (viewJust)
import Nri.Ui.Shadows.V1 as Shadows
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.UiIcon.V1 as UiIcon
import Nri.Ui.WhenFocusLeaves.V1 as WhenFocusLeaves
{-| -}
@ -465,6 +466,26 @@ viewCustom config =
[]
)
)
:: (case config.purpose of
NavMenu ->
AttributesExtra.none
Disclosure { lastId } ->
WhenFocusLeaves.toAttribute
{ firstId = config.buttonId
, lastId = Maybe.withDefault config.buttonId lastId
, tabBackAction =
config.focusAndToggle
{ isOpen = False
, focus = Nothing
}
, tabForwardAction =
config.focusAndToggle
{ isOpen = False
, focus = Nothing
}
}
)
:: styleContainer
)
[ if config.isOpen then

View File

@ -255,7 +255,7 @@ view ellieLinkConfig state =
(menuAttributes
++ [ Menu.buttonId "with_controls__button"
, Menu.menuId "with_controls__menu"
, Menu.disclosure { lastId = Nothing }
, Menu.disclosure { lastId = Just "login__button" }
]
)
{ isOpen = isOpen "with_controls"
@ -270,6 +270,7 @@ view ellieLinkConfig state =
, TextInput.view "Password" []
, Button.button "Log in"
[ Button.primary
, Button.id "login__button"
, Button.fillContainerWidth
, Button.css [ Css.marginTop (Css.px 15) ]
]