text selection mixin now works in grid

README.md

@@ -58,7 +58,9 @@ The author of the majority of the code is Miki, but this project would not be po
 * Gerald Koch
 * Sebastian Kühnau
 * Jean-François Lamy
+* Erik Lumme
 * Simon Martinelli
+* Dmitry Nazukin
 * Stefan Penndorf
 * Stuart Robinson
 * Kaspar Scherrer
@@ -68,3 +70,5 @@ The author of the majority of the code is Miki, but this project would not be po
 ## Small print
 
 All components are provided "as is", with no warranty or liability. See license for details.
+
+This library is not officially supported or endorsed by Vaadin and is not part of the Vaadin Platform.

superfields/src/main/java/org/vaadin/miki/shared/text/TextSelectionDelegate.java

@@ -27,7 +27,9 @@
  * The source component must implement {@link CanSelectText} and {@link CanReceiveSelectionEventsFromClient} and delegate them
  * to this object.
  * The client-side component must mix in {@code text-selection-mixin.js} or otherwise react to needed JS method calls.
- * Finally, the delegating class must implement a method {@code @ClientCallable void selectionChanged(int, int, String)}.
+ * Finally, the delegating class must implement methods: {@code @ClientCallable void selectionChanged(int, int, String)} and
+ * {@code @ClientCallable void reinitialiseEventListening()}. The first method should call this object's
+ * {@link #fireTextSelectionEvent(boolean, int, int, String)} and the second method should just be delegated to this object.
  *
  * @author miki
  * @since 2020-06-01
@@ -115,7 +117,6 @@ public void selectNone() {
         }
     }
 
-
     @Override
     public void select(int from, int to) {
         if(from <= to)
@@ -182,4 +183,12 @@ public void setReceivingSelectionEventsFromClient(boolean receivingSelectionEven
         this.receivingSelectionEventsFromClient = receivingSelectionEventsFromClient;
         this.informClientAboutSendingEvents(receivingSelectionEventsFromClient);
     }
+
+    /**
+     * This method should be called in response to {@code @ClientCallable void reinitialiseListeners()} on the owning object.
+     */
+    // fix for https://github.com/vaadin-miki/super-fields/issues/243 and the way components are initialised inside Grid
+    public void reinitialiseListeners() {
+        this.informClientAboutSendingEvents(this.isReceivingSelectionEventsFromClient());
+    }
 }

superfields/src/main/java/org/vaadin/miki/superfields/text/SuperTextArea.java

@@ -107,4 +107,9 @@ private void selectionChanged(int start, int end, String selection) {
         this.delegate.fireTextSelectionEvent(true, start, end, selection);
     }
 
+    @ClientCallable
+    private void reinitialiseListening() {
+        this.delegate.reinitialiseListeners();
+    }
+
 }

superfields/src/main/java/org/vaadin/miki/superfields/text/SuperTextField.java

@@ -98,6 +98,11 @@ private void selectionChanged(int start, int end, String selection) {
         this.delegate.fireTextSelectionEvent(true, start, end, selection);
     }
 
+    @ClientCallable
+    private void reinitialiseListening() {
+        this.delegate.reinitialiseListeners();
+    }
+
     @Override
     public boolean isReceivingSelectionEventsFromClient() {
         return this.delegate.isReceivingSelectionEventsFromClient();

superfields/src/main/resources/META-INF/resources/frontend/super-text-field.js

@@ -7,6 +7,7 @@ class SuperTextField extends TextSelectionMixin.to(TextFieldElement) {
 
     setCallingServer(callingServer) {
         console.log('STF: configuring event listeners; callingServer flag is '+callingServer);
+        console.log('STF: this now refers to '+this);
         this.listenToEvents(this.inputElement, this, callingServer);
     }
 

superfields/src/main/resources/META-INF/resources/frontend/text-selection-mixin.js

@@ -46,22 +46,33 @@ export class TextSelectionMixin {
 
             listenToEvents(inputComponent, webComponent, notifyServer) {
                 console.log('TSM: setting up text selection for component <'+webComponent.tagName+'>');
-                if (webComponent.selectionMixin === undefined) {
-                    webComponent.selectionMixin = {
-                        input: inputComponent,
-                        callServer: notifyServer,
-                        startsAt: -1,
-                        endsAt: -1,
-                        selection: ''
+                if (inputComponent === undefined) {
+                    console.log('TSM: input component is undefined, attempting to find it from shadow root/input element');
+                    inputComponent = webComponent.inputElement;
+                    if (inputComponent === undefined) {
+                        console.warn('TSM: no input component, server will reinitialise this component shortly');
+                        // this trick has been suggested by the magnificent Erik Lumme, thank you!
+                        webComponent.$server.reinitialiseListening();
                     }
-
-                    const listener = () => webComponent.updateData(webComponent.selectionMixin, webComponent);
-                    inputComponent.addEventListener('mouseup', listener);
-                    inputComponent.addEventListener('keyup', listener);
-                    inputComponent.addEventListener('mouseleave', listener);
                 }
-                else {
-                    webComponent.selectionMixin.callServer = notifyServer;
+                if (inputComponent !== undefined) {
+                    console.log('TSM: input component is ' + inputComponent);
+                    if (webComponent.selectionMixin === undefined) {
+                        webComponent.selectionMixin = {
+                            input: inputComponent,
+                            callServer: notifyServer,
+                            startsAt: -1,
+                            endsAt: -1,
+                            selection: ''
+                        }
+
+                        const listener = () => webComponent.updateData(webComponent.selectionMixin, webComponent);
+                        inputComponent.addEventListener('mouseup', listener);
+                        inputComponent.addEventListener('keyup', listener);
+                        inputComponent.addEventListener('mouseleave', listener);
+                    } else {
+                        webComponent.selectionMixin.callServer = notifyServer;
+                    }
                 }
             }
         }