FloatingActionButton Open State
The FloatingActionButton enables you to control the state of its item popup from your application. The component provides the opened prop, and it raises open and close events when user interaction changes the state.
The component provides the following options for:
Configuring the Initial State
When you omit the opened prop, the popup starts closed and the component manages its state. To open the popup on load, bind opened to true. Once you bind opened, its value determines whether the popup is visible. Changes to the bound value do not emit open or close events, so update the value from your application or in response to the open and close events.
The following demo opens the popup on load and lets you open and close it with external buttons.
Preventing Opening and Closing
The open and close events fire when users click the main button, select an item, or move the focus away from the component. The events fire only when the component has items.
While opened is bound, the popup changes only when you update the bound value. To prevent the popup from opening or closing, leave the value unchanged in the corresponding event handler.
Some keyboard actions change the component's internal popup state without emitting open or close. The popup ignores that internal state while opened is bound. For more information, see FloatingActionButton Events.
The following demo prevents the popup from closing by keeping opened set to true in the close handler.