Close and re-open mobile floating actions

Hi,

Floating Actions docs

Is there any way I can close and re-open the floating actions widget in an action or code?  I've found this old link which is from 2018. But that solution doesn't work for two reasons. The open and close classes are different than described in the old post. And even if I closed them it won't work. Because the widget has a local variable which holds the open and close state of the widget.

These are the classes that needs to be removed in order to close the floating actions. With this I have to double-click in order to re-open the floating actions menu. Which is a bad mobile UX.

Kind regards,

Bo

mvp_badge
MVP
Solution

Hi Bo Menick,

For the mentioned use-case, one of the approach is to hook the floating button and simulate the click event on it by using javascript.

  • Define a custom extended class to the FloatingActions widget as shown below, e.g. floatingActions__Handel

JavaScript Snippet:

var floatBtn = document.querySelector('.floatingActions__Handel .floating-button');

if (floatBtn) { 
    floatBtn.click();
}

See this sample screen FloatingActionItemsTask


I hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith,

Thanks for your response, the solution works great.

Regards,

Bo

mvp_badge
MVP

You're welcome, Bo

Glad to help you :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.