No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    trigger a context menu in a q-input textarea when selecting text

    Help
    events q-input q-menu
    2
    4
    862
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kimgerdes last edited by

      I’m trying to obtain a context menu that is triggered on a q-input textarea as soon as a word is selected.
      Here is a fiddle with the best I’ve come up with: https://jsfiddle.net/kimgerdes/r7bsqtyf/36/

        <q-input
      	v-model="textmodel"
      	type="textarea"
      	filled
      	label="Paste your text here"
      	style="overflow: auto"
      	@select="ttselect"
      	>
      		<q-menu
      		v-model="cmenu"
      		touch-position
      		ref='menu'
      		offset=[250,50] 
      		>
      			<q-list dense style="min-width: 100px">
      			<q-item clickable v-close-popup>
      			<q-item-section>Search for "{{selword}}"</q-item-section>
      			</q-item>
      			<q-item clickable v-close-popup>
      			<q-item-section>Something else</q-item-section>
      			</q-item> 
      		</q-list>
      	</q-menu>
      </q-input>
      
          new Vue({
            el: '#q-app',
            data: function() {
              return {
                version: Quasar.version,
                textmodel: "Why is the selection disappearing when selecting a word? I tried all kinds of event modifiers on clicks from https://vuejs.org/v2/guide/events.html#Event-Modifiers on different (click) events on the q-input but failed to get this running.",
                cmenu: true,
                selword: ''
              }
            },
            methods: {
              ttselect: function(event) {
                this.selword = event.srcElement.value.substring(event.srcElement.selectionStart, event.srcElement.selectionEnd);
          			//this.cmenu= false;
          
                this.$q.notify('This text was selected:'  + this.selword)
              }
            }
          })
      

      Yet, the menu is appearing even with a simple click in the text, and the text selection is disappearing when the menu appears. I guess it’s something about the click-event propagating the unselection of the text. So I tried all kinds of event modifiers on clicks from https://vuejs.org/v2/guide/events.html#Event-Modifiers on different (click) events on the q-input but failed to get this running.

      Here is what i want:

      • a context menu that appears if and only if some text is selected.
      • preferably that only happens if the selection is done by double-clicking, but it’s ok if it appears also during normal selection.
      • the selected text remains selected when the menu is showing.

      I’d be very grateful for any hint to what I should try.

      1 Reply Last reply Reply Quote 0
      • qyloxe
        qyloxe last edited by

        In the context of rich, interactive editors, I would just use this:

        https://github.com/donotebase/quasar-tiptap

        1 Reply Last reply Reply Quote 0
        • K
          kimgerdes last edited by

          Thanks so much, @qyloxe for your answer. I’ve tried for some time to install tiptap, it somehow works but looks weird and throws many errors the first of which is “[Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the “name” option.”

          BUT: in fact I don’t need a rich editor. On the contrary, I just want an text area with context menus that opens when text is selected. So using Tiptap may be some kind of overkill.

          Do you have any idea how I could do that?

          qyloxe 1 Reply Last reply Reply Quote 0
          • qyloxe
            qyloxe @kimgerdes last edited by

            @kimgerdes said in trigger a context menu in a q-input textarea when selecting text:

            Do you have any idea how I could do that?

            Nope. Nothing easy and portable comes to mind.

            Writing myself routines for proper selection handling, mixing it with dnd, ensuring that it works smoothly and doesn’t break browser behaviours, is imho big time overkill. Would rather prefer to use something ready and maintained.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post