Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@click listener within misc-item slot #480

Open
2 of 9 tasks
tobyj opened this issue Aug 25, 2021 · 2 comments
Open
2 of 9 tasks

@click listener within misc-item slot #480

tobyj opened this issue Aug 25, 2021 · 2 comments
Labels
enhancement New feature or request hacktoberfest This issue is participating in hacktoberfest
Milestone

Comments

@tobyj
Copy link

tobyj commented Aug 25, 2021

I'm submitting a ...

  • bug report
  • feature request
  • 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?

  • 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
Copy link
Contributor

xlcrr commented Sep 14, 2021

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>

@kaskar2008 kaskar2008 added enhancement New feature or request hacktoberfest This issue is participating in hacktoberfest labels Oct 12, 2021
@kaskar2008 kaskar2008 added this to the 1.12 milestone Oct 12, 2021
@kieaiaarh
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request hacktoberfest This issue is participating in hacktoberfest
Projects
None yet
Development

No branches or pull requests

4 participants