@click listener within misc-item slot

tobyj commented 3 years ago

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)

xlcrr commented 3 years ago

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>

kieaiaarh commented 2 years ago

@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?

KazanExpress / vue-simple-suggest