From 238a224249c16d926c8b32c39bd8d7f2a84f9d50 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 10:31:49 +0300 Subject: [PATCH 1/9] #4946 Add ValueChangeMode documentation and examples for TextField --- articles/components/text-field/index.adoc | 32 ++++++++++++++ .../textfield/text-field-value-change-mode.ts | 7 +++ .../textfield/TextFieldValueChangeMode.java | 43 +++++++++++++++++++ 3 files changed, 82 insertions(+) create mode 100644 frontend/demo/component/textfield/text-field-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index 1d3e80a559..283bdffe5d 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -155,7 +155,39 @@ kbd:[Tab]|Cursor at the end of the input value. kbd:[Shift+Tab]|Contents selectedfootnote:[Consequent keyboard navigation results in the contents being selected until the selection is changed, by either arrow navigation or mouse click.] |=== +== Different Change Modes [badge-flow]#Flow# +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/textfield/text-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- == Related Components diff --git a/frontend/demo/component/textfield/text-field-value-change-mode.ts b/frontend/demo/component/textfield/text-field-value-change-mode.ts new file mode 100644 index 0000000000..eab6d561d8 --- /dev/null +++ b/frontend/demo/component/textfield/text-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/text-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java new file mode 100644 index 0000000000..16c924c4e8 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -0,0 +1,43 @@ +package com.vaadin.demo.component.textfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("text-field-value-change-mode") +public class TextFieldValueChangeMode extends VerticalLayout { + + public TextFieldValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var textField = new TextField("Text Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(textField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + textField.clear(); + textField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + textField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(textField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From 6cb12dd4dab016129b8612f11cbf442ff249736b Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 10:46:51 +0300 Subject: [PATCH 2/9] #4946 Add ValueChangeMode documentation and examples for EmailField --- articles/components/email-field/index.adoc | 34 ++++++++++++++ .../email-field-value-change-mode.ts | 7 +++ .../emailfield/EmailFieldValueChangeMode.java | 44 +++++++++++++++++++ 3 files changed, 85 insertions(+) create mode 100644 frontend/demo/component/emailfield/email-field-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index 35bc62d6d7..be02f8f750 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -152,4 +152,38 @@ include::{root}/frontend/demo/component/emailfield/react/email-field-readonly-an endif::[] -- +== Different Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + [discussion-id]`CC0AAD7F-3E1C-4A8E-A331-52F2AEDDD907` diff --git a/frontend/demo/component/emailfield/email-field-value-change-mode.ts b/frontend/demo/component/emailfield/email-field-value-change-mode.ts new file mode 100644 index 0000000000..5c156014b8 --- /dev/null +++ b/frontend/demo/component/emailfield/email-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/email-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java new file mode 100644 index 0000000000..3161014bd6 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -0,0 +1,44 @@ +package com.vaadin.demo.component.emailfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.EmailField; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("email-field-value-change-mode") +public class EmailFieldValueChangeMode extends VerticalLayout { + + public EmailFieldValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var emailField = new EmailField("Email Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(emailField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + emailField.clear(); + emailField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + emailField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(emailField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From eeb6c46d77f454772aa1961fef8540652c56191a Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 10:57:20 +0300 Subject: [PATCH 3/9] #4946 Add ValueChangeMode documentation and examples for NumberField --- articles/components/email-field/index.adoc | 2 +- articles/components/number-field/index.adoc | 34 ++++++++++++++ articles/components/text-field/index.adoc | 2 +- .../number-field-value-change-mode.ts | 7 +++ .../emailfield/EmailFieldValueChangeMode.java | 2 - .../NumberFieldValueChangeMode.java | 44 +++++++++++++++++++ 6 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 frontend/demo/component/numberfield/number-field-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index be02f8f750..ffb6d6638d 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -152,7 +152,7 @@ include::{root}/frontend/demo/component/emailfield/react/email-field-readonly-an endif::[] -- -== Different Change Modes [badge-flow]#Flow# +== Value Change Modes [badge-flow]#Flow# With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index ea7e973e97..e1b9a6c681 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -273,6 +273,40 @@ include::{root}/frontend/demo/component/numberfield/react/number-field-readonly- endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/numberfield/number-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index 283bdffe5d..a5b3e72ea1 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -155,7 +155,7 @@ kbd:[Tab]|Cursor at the end of the input value. kbd:[Shift+Tab]|Contents selectedfootnote:[Consequent keyboard navigation results in the contents being selected until the selection is changed, by either arrow navigation or mouse click.] |=== -== Different Change Modes [badge-flow]#Flow# +== Value Change Modes [badge-flow]#Flow# With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. diff --git a/frontend/demo/component/numberfield/number-field-value-change-mode.ts b/frontend/demo/component/numberfield/number-field-value-change-mode.ts new file mode 100644 index 0000000000..78f1c60716 --- /dev/null +++ b/frontend/demo/component/numberfield/number-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/number-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 3161014bd6..184dffa085 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -7,7 +7,6 @@ import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.EmailField; -import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.value.ValueChangeMode; @Route("email-field-value-change-mode") @@ -15,7 +14,6 @@ public class EmailFieldValueChangeMode extends VerticalLayout { public EmailFieldValueChangeMode() { setPadding(false); - // tag::snippet[] var emailField = new EmailField("Email Field"); var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java new file mode 100644 index 0000000000..21ab486a8d --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -0,0 +1,44 @@ +package com.vaadin.demo.component.numberfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.EmailField; +import com.vaadin.flow.component.textfield.NumberField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("number-field-value-change-mode") +public class NumberFieldValueChangeMode extends VerticalLayout { + + public NumberFieldValueChangeMode() { + setPadding(false); + // tag::snippet[] + var numberField = new NumberField("Number Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(numberField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + numberField.clear(); + numberField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + numberField.addValueChangeListener(e -> + serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(numberField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From 1dcfb0c88dd649cfb9370b1facde9d84d102095c Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 15:45:12 +0300 Subject: [PATCH 4/9] #4946 Add ValueChangeMode documentation and examples for PasswordField, RichTextEditor, Slider, and TextArea --- articles/components/password-field/index.adoc | 34 +++++++++++++++ .../components/rich-text-editor/index.adoc | 34 +++++++++++++++ articles/components/slider/index.adoc | 34 +++++++++++++++ articles/components/text-area/index.adoc | 34 +++++++++++++++ .../password-field-value-change-mode.ts | 7 ++++ .../rich-text-editor-value-change-mode.ts | 7 ++++ .../slider/slider-value-change-mode.ts | 7 ++++ .../textarea/text-area-value-change-mode.ts | 7 ++++ .../NumberFieldValueChangeMode.java | 1 - .../PasswordFieldValueChangeMode.java | 42 +++++++++++++++++++ .../RichTextEditorValueChangeMode.java | 40 ++++++++++++++++++ .../slider/SliderValueChangeMode.java | 41 ++++++++++++++++++ .../textarea/TextAreaValueChangeMode.java | 42 +++++++++++++++++++ 13 files changed, 329 insertions(+), 1 deletion(-) create mode 100644 frontend/demo/component/passwordfield/password-field-value-change-mode.ts create mode 100644 frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts create mode 100644 frontend/demo/component/slider/slider-value-change-mode.ts create mode 100644 frontend/demo/component/textarea/text-area-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java create mode 100644 src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java create mode 100644 src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java create mode 100644 src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java diff --git a/articles/components/password-field/index.adoc b/articles/components/password-field/index.adoc index 68e2d87af4..facb80d67c 100644 --- a/articles/components/password-field/index.adoc +++ b/articles/components/password-field/index.adoc @@ -166,6 +166,40 @@ endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/passwordfield/password-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices Express clearly your password requirements to the user, so that they don't have to guess. The <> feature is appropriate for this purpose. diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index aac2d42968..5e7266faa7 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -279,6 +279,40 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-mi endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Toolbar Actions diff --git a/articles/components/slider/index.adoc b/articles/components/slider/index.adoc index fd23daed40..6a9797734d 100644 --- a/articles/components/slider/index.adoc +++ b/articles/components/slider/index.adoc @@ -275,6 +275,40 @@ endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/slider/slider-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices Slider is best suited for settings where the user benefits from immediate visual feedback, such as adjusting volume or brightness. Range Slider is best suited for filtering or selecting a subset of a continuous range, such as a price range or date span. diff --git a/articles/components/text-area/index.adoc b/articles/components/text-area/index.adoc index 985cae6d0e..86746e834c 100644 --- a/articles/components/text-area/index.adoc +++ b/articles/components/text-area/index.adoc @@ -257,6 +257,40 @@ include::{root}/frontend/demo/component/textarea/react/text-area-helper.tsx[rend endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/textarea/text-area-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Related Components [cols="1,2"] diff --git a/frontend/demo/component/passwordfield/password-field-value-change-mode.ts b/frontend/demo/component/passwordfield/password-field-value-change-mode.ts new file mode 100644 index 0000000000..eab6d561d8 --- /dev/null +++ b/frontend/demo/component/passwordfield/password-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/text-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts b/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts new file mode 100644 index 0000000000..6d7c9abef2 --- /dev/null +++ b/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/rich-text-editor'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/component/slider/slider-value-change-mode.ts b/frontend/demo/component/slider/slider-value-change-mode.ts new file mode 100644 index 0000000000..2d3f6b638e --- /dev/null +++ b/frontend/demo/component/slider/slider-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/slider'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/component/textarea/text-area-value-change-mode.ts b/frontend/demo/component/textarea/text-area-value-change-mode.ts new file mode 100644 index 0000000000..eab6d561d8 --- /dev/null +++ b/frontend/demo/component/textarea/text-area-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/text-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java index 21ab486a8d..4711e22150 100644 --- a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -6,7 +6,6 @@ import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; -import com.vaadin.flow.component.textfield.EmailField; import com.vaadin.flow.component.textfield.NumberField; import com.vaadin.flow.data.value.ValueChangeMode; diff --git a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java new file mode 100644 index 0000000000..562a6d4039 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -0,0 +1,42 @@ +package com.vaadin.demo.component.passwordfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.PasswordField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("password-field-value-change-mode") +public class PasswordFieldValueChangeMode extends VerticalLayout { + + public PasswordFieldValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var passwordField = new PasswordField("Password Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(passwordField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + passwordField.clear(); + passwordField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + passwordField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(passwordField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java new file mode 100644 index 0000000000..1f61e4ea6e --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -0,0 +1,40 @@ +package com.vaadin.demo.component.richtexteditor; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.richtexteditor.RichTextEditor; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("rich-text-editor-value-change-mode") +public class RichTextEditorValueChangeMode extends VerticalLayout { + + public RichTextEditorValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var rte = new RichTextEditor(); + rte.setMaxHeight("300px"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(rte.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + rte.setValue(""); + rte.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + rte.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(rte, modeSelector, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java new file mode 100644 index 0000000000..11f322a27a --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -0,0 +1,41 @@ +package com.vaadin.demo.component.slider; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.slider.DecimalSlider; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("slider-value-change-mode") +public class SliderValueChangeMode extends VerticalLayout { + + public SliderValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var slider = new DecimalSlider("Slider"); + slider.setValue(50.0); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(slider.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + slider.setValue(50.0); + slider.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + slider.addValueChangeListener(e -> + serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(slider, modeSelector, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java new file mode 100644 index 0000000000..8d1dd1265a --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -0,0 +1,42 @@ +package com.vaadin.demo.component.textarea; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.TextArea; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("text-area-value-change-mode") +public class TextAreaValueChangeMode extends VerticalLayout { + + public TextAreaValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var textArea = new TextArea("Text Area"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(textArea.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + textArea.clear(); + textArea.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + textArea.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(textArea, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From 1f18b9818ff69d15a2a81b9ac9dd0f7acd69357e Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Fri, 8 May 2026 14:38:34 +0300 Subject: [PATCH 5/9] #4946 Fix broken style rules --- .../emailfield/EmailFieldValueChangeMode.java | 13 ++++++++----- .../numberfield/NumberFieldValueChangeMode.java | 14 ++++++++------ .../PasswordFieldValueChangeMode.java | 15 ++++++++++----- .../RichTextEditorValueChangeMode.java | 12 ++++++++---- .../component/slider/SliderValueChangeMode.java | 10 ++++++---- .../textarea/TextAreaValueChangeMode.java | 9 ++++++--- .../textfield/TextFieldValueChangeMode.java | 13 ++++++++----- 7 files changed, 54 insertions(+), 32 deletions(-) diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 184dffa085..4a91b42606 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -16,14 +16,16 @@ public EmailFieldValueChangeMode() { setPadding(false); // tag::snippet[] var emailField = new EmailField("Email Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(emailField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { emailField.clear(); emailField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - emailField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + emailField.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -31,12 +33,13 @@ public EmailFieldValueChangeMode() { var horizontalLayout = new HorizontalLayout(emailField, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java index 4711e22150..f5771953fa 100644 --- a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -16,15 +16,16 @@ public NumberFieldValueChangeMode() { setPadding(false); // tag::snippet[] var numberField = new NumberField("Number Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(numberField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { numberField.clear(); numberField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - numberField.addValueChangeListener(e -> - serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + numberField.addValueChangeListener(e -> serverSideContent + .setText(e.getValue() == null ? "" : e.getValue().toString())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -32,12 +33,13 @@ public NumberFieldValueChangeMode() { var horizontalLayout = new HorizontalLayout(numberField, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java index 562a6d4039..746dc3c23e 100644 --- a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -17,26 +17,31 @@ public PasswordFieldValueChangeMode() { // tag::snippet[] var passwordField = new PasswordField("Password Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(passwordField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { passwordField.clear(); passwordField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - passwordField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + passwordField.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); - var horizontalLayout = new HorizontalLayout(passwordField, modeSelector); + var horizontalLayout = new HorizontalLayout(passwordField, + modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java index 1f61e4ea6e..082e2edc34 100644 --- a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -18,23 +18,27 @@ public RichTextEditorValueChangeMode() { // tag::snippet[] var rte = new RichTextEditor(); rte.setMaxHeight("300px"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(rte.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { rte.setValue(""); rte.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - rte.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + rte.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(rte, modeSelector, serverSideLayout); } - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java index 11f322a27a..a1212058cf 100644 --- a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -18,20 +18,22 @@ public SliderValueChangeMode() { // tag::snippet[] var slider = new DecimalSlider("Slider"); slider.setValue(50.0); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(slider.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { slider.setValue(50.0); slider.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - slider.addValueChangeListener(e -> - serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + slider.addValueChangeListener(e -> serverSideContent + .setText(e.getValue() == null ? "" : e.getValue().toString())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(slider, modeSelector, serverSideLayout); } diff --git a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java index 8d1dd1265a..9f80f83222 100644 --- a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -17,14 +17,16 @@ public TextAreaValueChangeMode() { // tag::snippet[] var textArea = new TextArea("Text Area"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(textArea.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { textArea.clear(); textArea.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - textArea.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + textArea.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -32,7 +34,8 @@ public TextAreaValueChangeMode() { var horizontalLayout = new HorizontalLayout(textArea, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } diff --git a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java index 16c924c4e8..31720744a5 100644 --- a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -17,14 +17,16 @@ public TextFieldValueChangeMode() { // tag::snippet[] var textField = new TextField("Text Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(textField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { textField.clear(); textField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - textField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + textField.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -32,12 +34,13 @@ public TextFieldValueChangeMode() { var horizontalLayout = new HorizontalLayout(textField, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } From 1b390a9f4d1b9023f5fa05b8a0362e6f8342419a Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Tue, 9 Jun 2026 12:22:10 +0300 Subject: [PATCH 6/9] #5559 Extract value change documentation into common features doc. Also remove onblur mode from documentation --- .../_input-field-common-features.adoc | 36 +++++++++++++++++++ articles/components/email-field/index.adoc | 34 +----------------- articles/components/number-field/index.adoc | 35 +----------------- articles/components/password-field/index.adoc | 35 +----------------- .../components/rich-text-editor/index.adoc | 34 +----------------- articles/components/slider/index.adoc | 35 +----------------- articles/components/text-area/index.adoc | 34 +----------------- articles/components/text-field/index.adoc | 34 +----------------- .../emailfield/EmailFieldValueChangeMode.java | 4 ++- 9 files changed, 46 insertions(+), 235 deletions(-) diff --git a/articles/components/_input-field-common-features.adoc b/articles/components/_input-field-common-features.adoc index efb3e3068f..f507d52b11 100644 --- a/articles/components/_input-field-common-features.adoc +++ b/articles/components/_input-field-common-features.adoc @@ -272,3 +272,39 @@ The following style variants can be applied: // tag::styles-end[] |=== // end::styles-end[] + + +// tag::value-change-modes[] +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- +// end::value-change-modes[] diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index ffb6d6638d..74a3859d44 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -152,38 +152,6 @@ include::{root}/frontend/demo/component/emailfield/react/email-field-readonly-an endif::[] -- -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] [discussion-id]`CC0AAD7F-3E1C-4A8E-A331-52F2AEDDD907` diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index e1b9a6c681..f1a0da9015 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -273,40 +273,7 @@ include::{root}/frontend/demo/component/numberfield/react/number-field-readonly- endif::[] -- -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/numberfield/number-field-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- - +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] == Best Practices diff --git a/articles/components/password-field/index.adoc b/articles/components/password-field/index.adoc index facb80d67c..e59f1ce96f 100644 --- a/articles/components/password-field/index.adoc +++ b/articles/components/password-field/index.adoc @@ -165,40 +165,7 @@ include::{root}/frontend/demo/component/passwordfield/react/password-field-reado endif::[] -- - -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/passwordfield/password-field-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] == Best Practices diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index 5e7266faa7..07c7fad8e5 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -279,39 +279,7 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-mi endif::[] -- -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] == Toolbar Actions diff --git a/articles/components/slider/index.adoc b/articles/components/slider/index.adoc index 6a9797734d..ebf74278bb 100644 --- a/articles/components/slider/index.adoc +++ b/articles/components/slider/index.adoc @@ -274,40 +274,7 @@ include::{root}/frontend/demo/component/slider/react/range-slider-custom-validat endif::[] -- - -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/slider/slider-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] == Best Practices diff --git a/articles/components/text-area/index.adoc b/articles/components/text-area/index.adoc index 86746e834c..bfeaa89b3d 100644 --- a/articles/components/text-area/index.adoc +++ b/articles/components/text-area/index.adoc @@ -257,39 +257,7 @@ include::{root}/frontend/demo/component/textarea/react/text-area-helper.tsx[rend endif::[] -- -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/textarea/text-area-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] == Related Components diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index a5b3e72ea1..1c5ced23ff 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -155,39 +155,7 @@ kbd:[Tab]|Cursor at the end of the input value. kbd:[Shift+Tab]|Contents selectedfootnote:[Consequent keyboard navigation results in the contents being selected until the selection is changed, by either arrow navigation or mouse click.] |=== -== Value Change Modes [badge-flow]#Flow# - -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - - -[options="header", cols="1,4,1"] -|=== -|Mode |Synchronization timing |Custom timeout interval -|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No -|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes -|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes -|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No -|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No -|=== - -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/textfield/text-field-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- +include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] == Related Components diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 4a91b42606..696297ab78 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.textfield.EmailField; import com.vaadin.flow.data.value.ValueChangeMode; +import java.util.List; + @Route("email-field-value-change-mode") public class EmailFieldValueChangeMode extends VerticalLayout { @@ -17,7 +19,7 @@ public EmailFieldValueChangeMode() { // tag::snippet[] var emailField = new EmailField("Email Field"); var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + List.of(ValueChangeMode.EAGER, ValueChangeMode.LAZY, ValueChangeMode.ON_CHANGE, ValueChangeMode.TIMEOUT)); modeSelector.setValue(emailField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { emailField.clear(); From cdec8507c2d2bc8c12dd99869a821c2a0e396414 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Tue, 9 Jun 2026 12:46:28 +0300 Subject: [PATCH 7/9] #5559 Adjust for code examples to be component specific --- .../_input-field-common-features.adoc | 19 ++++--------------- articles/components/email-field/index.adoc | 14 ++++++++++++++ articles/components/number-field/index.adoc | 15 +++++++++++++++ articles/components/password-field/index.adoc | 14 ++++++++++++++ .../components/rich-text-editor/index.adoc | 14 ++++++++++++++ articles/components/slider/index.adoc | 14 ++++++++++++++ articles/components/text-area/index.adoc | 14 ++++++++++++++ articles/components/text-field/index.adoc | 14 ++++++++++++++ .../com/vaadin/demo/component/Constants.java | 13 +++++++++++++ .../emailfield/EmailFieldValueChangeMode.java | 5 +++-- .../NumberFieldValueChangeMode.java | 5 +++-- .../PasswordFieldValueChangeMode.java | 5 +++-- .../RichTextEditorValueChangeMode.java | 5 +++-- .../slider/SliderValueChangeMode.java | 5 +++-- .../textarea/TextAreaValueChangeMode.java | 5 +++-- .../textfield/TextFieldValueChangeMode.java | 5 +++-- 16 files changed, 137 insertions(+), 29 deletions(-) create mode 100644 src/main/java/com/vaadin/demo/component/Constants.java diff --git a/articles/components/_input-field-common-features.adoc b/articles/components/_input-field-common-features.adoc index f507d52b11..b53014dd00 100644 --- a/articles/components/_input-field-common-features.adoc +++ b/articles/components/_input-field-common-features.adoc @@ -273,6 +273,10 @@ The following style variants can be applied: |=== // end::styles-end[] +// tag::styles-end[] +|=== +// end::styles-end[] + // tag::value-change-modes[] == Value Change Modes [badge-flow]#Flow# @@ -292,19 +296,4 @@ These modes are described below. |=== For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. - - -[.example] --- -[source,typescript] ----- - -include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] ----- - -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] ----- --- // end::value-change-modes[] diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index 74a3859d44..7471e02bfc 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -154,4 +154,18 @@ endif::[] include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + [discussion-id]`CC0AAD7F-3E1C-4A8E-A331-52F2AEDDD907` diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index f1a0da9015..f3bb7e60a9 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -275,6 +275,21 @@ endif::[] include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/numberfield/number-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + + == Best Practices Number Field should be used for actual number values, such as counts and measures -- values that may be part of a calculation. Don't use it for other digit-based values, such as telephone, credit card, and social security numbers. These values can have leading zeros and be greater than Number Field's maximum supported value. diff --git a/articles/components/password-field/index.adoc b/articles/components/password-field/index.adoc index e59f1ce96f..3e266f83d8 100644 --- a/articles/components/password-field/index.adoc +++ b/articles/components/password-field/index.adoc @@ -167,6 +167,20 @@ endif::[] include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/passwordfield/password-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices Express clearly your password requirements to the user, so that they don't have to guess. The <> feature is appropriate for this purpose. diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index 07c7fad8e5..8aa45c32c6 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -281,6 +281,20 @@ endif::[] include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Toolbar Actions diff --git a/articles/components/slider/index.adoc b/articles/components/slider/index.adoc index ebf74278bb..5dea7169f0 100644 --- a/articles/components/slider/index.adoc +++ b/articles/components/slider/index.adoc @@ -276,6 +276,20 @@ endif::[] include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/slider/slider-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices Slider is best suited for settings where the user benefits from immediate visual feedback, such as adjusting volume or brightness. Range Slider is best suited for filtering or selecting a subset of a continuous range, such as a price range or date span. diff --git a/articles/components/text-area/index.adoc b/articles/components/text-area/index.adoc index bfeaa89b3d..bf66cdd030 100644 --- a/articles/components/text-area/index.adoc +++ b/articles/components/text-area/index.adoc @@ -259,6 +259,20 @@ endif::[] include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/textarea/text-area-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Related Components [cols="1,2"] diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index 1c5ced23ff..a530e570f2 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -157,6 +157,20 @@ kbd:[Shift+Tab]|Contents selectedfootnote:[Consequent keyboard navigation result include::{articles}/components/_input-field-common-features.adoc[tags=value-change-modes] +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/textfield/text-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Related Components A variety of components are available for different types of input: diff --git a/src/main/java/com/vaadin/demo/component/Constants.java b/src/main/java/com/vaadin/demo/component/Constants.java new file mode 100644 index 0000000000..7b4a5ef66b --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/Constants.java @@ -0,0 +1,13 @@ +package com.vaadin.demo.component; + +import com.vaadin.flow.data.value.ValueChangeMode; + +import java.util.List; + +public class Constants { + private Constants() { + + } + + public final static List valueChangeModes = List.of(ValueChangeMode.EAGER, ValueChangeMode.LAZY, ValueChangeMode.ON_CHANGE, ValueChangeMode.TIMEOUT); +} diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 696297ab78..5b6220b00a 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -11,6 +11,8 @@ import java.util.List; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("email-field-value-change-mode") public class EmailFieldValueChangeMode extends VerticalLayout { @@ -18,8 +20,7 @@ public EmailFieldValueChangeMode() { setPadding(false); // tag::snippet[] var emailField = new EmailField("Email Field"); - var modeSelector = new Select<>("Value Change Mode", - List.of(ValueChangeMode.EAGER, ValueChangeMode.LAZY, ValueChangeMode.ON_CHANGE, ValueChangeMode.TIMEOUT)); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(emailField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { emailField.clear(); diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java index f5771953fa..971e8d5435 100644 --- a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.textfield.NumberField; import com.vaadin.flow.data.value.ValueChangeMode; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("number-field-value-change-mode") public class NumberFieldValueChangeMode extends VerticalLayout { @@ -16,8 +18,7 @@ public NumberFieldValueChangeMode() { setPadding(false); // tag::snippet[] var numberField = new NumberField("Number Field"); - var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(numberField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { numberField.clear(); diff --git a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java index 746dc3c23e..5c8824755a 100644 --- a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.textfield.PasswordField; import com.vaadin.flow.data.value.ValueChangeMode; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("password-field-value-change-mode") public class PasswordFieldValueChangeMode extends VerticalLayout { @@ -17,8 +19,7 @@ public PasswordFieldValueChangeMode() { // tag::snippet[] var passwordField = new PasswordField("Password Field"); - var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(passwordField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { passwordField.clear(); diff --git a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java index 082e2edc34..bcfda999e3 100644 --- a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.select.Select; import com.vaadin.flow.data.value.ValueChangeMode; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("rich-text-editor-value-change-mode") public class RichTextEditorValueChangeMode extends VerticalLayout { @@ -18,8 +20,7 @@ public RichTextEditorValueChangeMode() { // tag::snippet[] var rte = new RichTextEditor(); rte.setMaxHeight("300px"); - var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(rte.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { rte.setValue(""); diff --git a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java index a1212058cf..e37427f7e6 100644 --- a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.slider.DecimalSlider; import com.vaadin.flow.data.value.ValueChangeMode; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("slider-value-change-mode") public class SliderValueChangeMode extends VerticalLayout { @@ -18,8 +20,7 @@ public SliderValueChangeMode() { // tag::snippet[] var slider = new DecimalSlider("Slider"); slider.setValue(50.0); - var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(slider.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { slider.setValue(50.0); diff --git a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java index 9f80f83222..472c975c67 100644 --- a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.textfield.TextArea; import com.vaadin.flow.data.value.ValueChangeMode; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("text-area-value-change-mode") public class TextAreaValueChangeMode extends VerticalLayout { @@ -17,8 +19,7 @@ public TextAreaValueChangeMode() { // tag::snippet[] var textArea = new TextArea("Text Area"); - var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(textArea.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { textArea.clear(); diff --git a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java index 31720744a5..b69249743e 100644 --- a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -9,6 +9,8 @@ import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.value.ValueChangeMode; +import static com.vaadin.demo.component.Constants.valueChangeModes; + @Route("text-field-value-change-mode") public class TextFieldValueChangeMode extends VerticalLayout { @@ -17,8 +19,7 @@ public TextFieldValueChangeMode() { // tag::snippet[] var textField = new TextField("Text Field"); - var modeSelector = new Select<>("Value Change Mode", - ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", valueChangeModes); modeSelector.setValue(textField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { textField.clear(); From 7ec2f52a6fae45df277021f255a558837a659c96 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Tue, 9 Jun 2026 13:36:28 +0300 Subject: [PATCH 8/9] #5559 Fix spotless check, and remove reused tag --- articles/components/_input-field-common-features.adoc | 4 ---- src/main/java/com/vaadin/demo/component/Constants.java | 4 +++- .../demo/component/emailfield/EmailFieldValueChangeMode.java | 2 -- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/articles/components/_input-field-common-features.adoc b/articles/components/_input-field-common-features.adoc index b53014dd00..96b8f08e08 100644 --- a/articles/components/_input-field-common-features.adoc +++ b/articles/components/_input-field-common-features.adoc @@ -273,10 +273,6 @@ The following style variants can be applied: |=== // end::styles-end[] -// tag::styles-end[] -|=== -// end::styles-end[] - // tag::value-change-modes[] == Value Change Modes [badge-flow]#Flow# diff --git a/src/main/java/com/vaadin/demo/component/Constants.java b/src/main/java/com/vaadin/demo/component/Constants.java index 7b4a5ef66b..69e01da11f 100644 --- a/src/main/java/com/vaadin/demo/component/Constants.java +++ b/src/main/java/com/vaadin/demo/component/Constants.java @@ -9,5 +9,7 @@ private Constants() { } - public final static List valueChangeModes = List.of(ValueChangeMode.EAGER, ValueChangeMode.LAZY, ValueChangeMode.ON_CHANGE, ValueChangeMode.TIMEOUT); + public final static List valueChangeModes = List.of( + ValueChangeMode.EAGER, ValueChangeMode.LAZY, + ValueChangeMode.ON_CHANGE, ValueChangeMode.TIMEOUT); } diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 5b6220b00a..c52bc103ec 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -9,8 +9,6 @@ import com.vaadin.flow.component.textfield.EmailField; import com.vaadin.flow.data.value.ValueChangeMode; -import java.util.List; - import static com.vaadin.demo.component.Constants.valueChangeModes; @Route("email-field-value-change-mode") From 576f7f8ba494cdc8f74e35bb6aaf706c6d2c7ab8 Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Fri, 12 Jun 2026 19:37:27 +0300 Subject: [PATCH 9/9] Review fixes: document ON_BLUR mode, fix imports and API references - Add the missing ON_BLUR mode to the value change mode table and to the demo mode selectors (ValueChangeMode has five modes, all supported by the documented components) - Mention the default 400 ms timeout and reference setValueChangeTimeout() with the [methodname] markup; fix [classes] to [classname] - Use com.vaadin.flow.router.Route instead of the dummy com.vaadin.demo.flow.routing.Route in the demo classes - Import @vaadin/password-field and @vaadin/text-area in the respective preimport files instead of @vaadin/text-field - Remove stray blank lines in the typescript include blocks --- articles/components/_input-field-common-features.adoc | 8 +++----- articles/components/email-field/index.adoc | 1 - articles/components/number-field/index.adoc | 1 - articles/components/password-field/index.adoc | 1 - articles/components/rich-text-editor/index.adoc | 1 - articles/components/slider/index.adoc | 1 - articles/components/text-area/index.adoc | 1 - articles/components/text-field/index.adoc | 1 - .../passwordfield/password-field-value-change-mode.ts | 2 +- .../component/textarea/text-area-value-change-mode.ts | 2 +- src/main/java/com/vaadin/demo/component/Constants.java | 5 +++-- .../component/emailfield/EmailFieldValueChangeMode.java | 2 +- .../component/numberfield/NumberFieldValueChangeMode.java | 2 +- .../passwordfield/PasswordFieldValueChangeMode.java | 2 +- .../richtexteditor/RichTextEditorValueChangeMode.java | 2 +- .../demo/component/slider/SliderValueChangeMode.java | 2 +- .../demo/component/textarea/TextAreaValueChangeMode.java | 2 +- .../component/textfield/TextFieldValueChangeMode.java | 2 +- 18 files changed, 15 insertions(+), 23 deletions(-) diff --git a/articles/components/_input-field-common-features.adoc b/articles/components/_input-field-common-features.adoc index 96b8f08e08..d46819eb48 100644 --- a/articles/components/_input-field-common-features.adoc +++ b/articles/components/_input-field-common-features.adoc @@ -277,10 +277,7 @@ The following style variants can be applied: // tag::value-change-modes[] == Value Change Modes [badge-flow]#Flow# -With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. - -These modes are described below. - +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classname]`ValueChangeMode` enum provides the following modes: [options="header", cols="1,4,1"] |=== @@ -288,8 +285,9 @@ These modes are described below. |`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No |`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes |`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No |`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No |=== -For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. +For the modes that support a custom timeout interval, you can change the interval with the [methodname]`setValueChangeTimeout()` method. The default interval is 400 milliseconds. // end::value-change-modes[] diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index 7471e02bfc..485e8b9b7f 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -158,7 +158,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] ---- diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index f3bb7e60a9..a2d58e66e7 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -279,7 +279,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/numberfield/number-field-value-change-mode.ts[preimport,hidden] ---- diff --git a/articles/components/password-field/index.adoc b/articles/components/password-field/index.adoc index 3e266f83d8..cc1c552086 100644 --- a/articles/components/password-field/index.adoc +++ b/articles/components/password-field/index.adoc @@ -171,7 +171,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/passwordfield/password-field-value-change-mode.ts[preimport,hidden] ---- diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index 8aa45c32c6..853198b0bf 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -285,7 +285,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts[preimport,hidden] ---- diff --git a/articles/components/slider/index.adoc b/articles/components/slider/index.adoc index 4afaa136fe..2721209370 100644 --- a/articles/components/slider/index.adoc +++ b/articles/components/slider/index.adoc @@ -284,7 +284,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/slider/slider-value-change-mode.ts[preimport,hidden] ---- diff --git a/articles/components/text-area/index.adoc b/articles/components/text-area/index.adoc index bf66cdd030..067d10dc72 100644 --- a/articles/components/text-area/index.adoc +++ b/articles/components/text-area/index.adoc @@ -263,7 +263,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/textarea/text-area-value-change-mode.ts[preimport,hidden] ---- diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index a530e570f2..6ca047b1bd 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -161,7 +161,6 @@ include::{articles}/components/_input-field-common-features.adoc[tags=value-chan -- [source,typescript] ---- - include::{root}/frontend/demo/component/textfield/text-field-value-change-mode.ts[preimport,hidden] ---- diff --git a/frontend/demo/component/passwordfield/password-field-value-change-mode.ts b/frontend/demo/component/passwordfield/password-field-value-change-mode.ts index eab6d561d8..29698b2e8c 100644 --- a/frontend/demo/component/passwordfield/password-field-value-change-mode.ts +++ b/frontend/demo/component/passwordfield/password-field-value-change-mode.ts @@ -1,5 +1,5 @@ import 'Frontend/demo/init'; -import '@vaadin/text-field'; +import '@vaadin/password-field'; import '@vaadin/select'; import '@vaadin/horizontal-layout'; import '@vaadin/vertical-layout'; diff --git a/frontend/demo/component/textarea/text-area-value-change-mode.ts b/frontend/demo/component/textarea/text-area-value-change-mode.ts index eab6d561d8..c3d036d911 100644 --- a/frontend/demo/component/textarea/text-area-value-change-mode.ts +++ b/frontend/demo/component/textarea/text-area-value-change-mode.ts @@ -1,5 +1,5 @@ import 'Frontend/demo/init'; -import '@vaadin/text-field'; +import '@vaadin/text-area'; import '@vaadin/select'; import '@vaadin/horizontal-layout'; import '@vaadin/vertical-layout'; diff --git a/src/main/java/com/vaadin/demo/component/Constants.java b/src/main/java/com/vaadin/demo/component/Constants.java index 69e01da11f..29ce13ef34 100644 --- a/src/main/java/com/vaadin/demo/component/Constants.java +++ b/src/main/java/com/vaadin/demo/component/Constants.java @@ -9,7 +9,8 @@ private Constants() { } - public final static List valueChangeModes = List.of( + public static final List valueChangeModes = List.of( ValueChangeMode.EAGER, ValueChangeMode.LAZY, - ValueChangeMode.ON_CHANGE, ValueChangeMode.TIMEOUT); + ValueChangeMode.TIMEOUT, ValueChangeMode.ON_BLUR, + ValueChangeMode.ON_CHANGE); } diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index c52bc103ec..1d0f3bef3c 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.emailfield; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.EmailField; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes; diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java index 971e8d5435..51e4a8886f 100644 --- a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.numberfield; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.NumberField; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes; diff --git a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java index 5c8824755a..eda6e000f9 100644 --- a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.passwordfield; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.PasswordField; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes; diff --git a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java index bcfda999e3..86eb03f180 100644 --- a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.richtexteditor; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.richtexteditor.RichTextEditor; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes; diff --git a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java index e37427f7e6..fd70b08504 100644 --- a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.slider; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.slider.DecimalSlider; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes; diff --git a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java index 472c975c67..9fa3479fb3 100644 --- a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.textarea; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.TextArea; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes; diff --git a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java index b69249743e..374b7ec15c 100644 --- a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -1,13 +1,13 @@ package com.vaadin.demo.component.textfield; import com.vaadin.demo.DemoExporter; -import com.vaadin.demo.flow.routing.Route; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; import static com.vaadin.demo.component.Constants.valueChangeModes;