vue-simple-suggest icon indicating copy to clipboard operation
vue-simple-suggest copied to clipboard

@click listener within misc-item slot

Open tobyj opened this issue 4 years ago • 2 comments

I'm submitting a ...

  • [ ] bug report
  • [ ] feature request
  • [X] support request

What is the current behavior?

Unable to get @click listeners to work within misc-item-* slots. When clicking there it just closes the list. I've tried @click.stop and prevent here also. I've got around it by using hacky @focus.stop="myMethod" instead.

Is there a way to listen to clicks within misc-item slots?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

<div slot="misc-item-below">
   <div @click="enterManually">Enter address manually</div>
</div>

...

methods: {
  enterManually () {
    console.log('click event worked');
  }
}

What is the expected behavior?

Click handler should fire. List closing etc. can be done in handler.

How are you importing Vue-simple-suggest?

  • [X] ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
  • [ ] ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
  • [ ] ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
  • [ ] Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
  • [ ] CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
  • [ ] UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

What is the motivation / use case for changing the behavior?

I'm using vue-simple-suggest to search addresses (similar to google maps autocomplete). If an address can't be found after a few keystrokes I need show an option to switch to a manual address input form.

Please tell us about your environment:

  • Vue.js Version: 2.6.11
  • Vue-simple-suggest version: 1.10.4
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

tobyj avatar Aug 25 '21 11:08 tobyj

Same problem for me, custom template closes.

<template slot="misc-item-above" slot-scope="{ suggestions, query }" v-if="newItem.length > 0">
    <div v-show="suggestions.length === 0" @click="submit">
        <p class="misc-select">{{ newItem }} : click to create</p>
    </div>
</template>

xlcrr avatar Sep 14 '21 15:09 xlcrr

@tobyj

hacky @focus.stop="myMethod" instead.

I'm having trouble with the same problem right now. If you don't mind, can you tell me exactly how to do it?

kieaiaarh avatar Feb 19 '22 15:02 kieaiaarh