docs: context menu disable on click (#3973)

* docs: context menu disable on click

* address review comments

* remove admonition

* minor edit

---------

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

articles/components/context-menu/index.adoc

@@ -263,6 +263,23 @@ include::{root}/frontend/demo/component/contextmenu/react/context-menu-disabled.
 endif::[]
 --
 
+[role="since:com.vaadin:vaadin@V24.6"]
+=== Disable on Click (Flow)
+
+To prevent duplicate clicks while the server is processing a request, call the `setDisableOnClick(true)` method on a menu item instance to immediately disable that menu item on the client-side when its clicked.
+
+[.example]
+--
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/contextmenu/ContextMenuDisableOnClick.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+--
+
 == Left-Click
 
 You can use left-click to open Context Menu in situations where left-click doesn't have any other function, for example a Grid without selection support.

src/main/java/com/vaadin/demo/component/contextmenu/ContextMenuDisableOnClick.java

@@ -0,0 +1,38 @@
+package com.vaadin.demo.component.contextmenu;
+
+import com.vaadin.demo.DemoExporter; // hidden-source-line
+import com.vaadin.flow.component.contextmenu.ContextMenu;
+import com.vaadin.flow.component.contextmenu.MenuItem;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.router.Route;
+
+@Route("context-menu-disable-on-click")
+public class ContextMenuDisableOnClick extends Div {
+
+    public ContextMenuDisableOnClick() {
+        Paragraph paragraph = new Paragraph();
+        paragraph.setText("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.");
+        add(paragraph);
+
+        ContextMenu menu = new ContextMenu(paragraph);
+        // tag::snippet[]
+        MenuItem summarize = menu.addItem("Summarize with AI");
+        summarize.setDisableOnClick(true);
+        // end::snippet[]
+        summarize.setKeepOpen(true);
+        summarize.addClickListener(event -> {
+            // Simulate long-running operation
+            try {
+                Thread.sleep(2000);
+            } catch (InterruptedException e) {
+                // ignore
+            }
+            summarize.setEnabled(true);
+            paragraph.setText("Lorem ipsum dolor sit amet.");
+        });
+    }
+
+    public static class Exporter extends DemoExporter<ContextMenuDisableOnClick> { // hidden-source-line
+    } // hidden-source-line
+}