• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  middle-xs attribute is ignored for nested containers in safari but working in other browsers.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  You can have a look at my site here: https://xvzf.tech - code is in this repo

• Please tell us about your environment:

  • Version: 1.0.0
  • Browser: [ Safari 13 ]
  • Language: [ES6/7]

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• Radio circle is not centered.
• Clearable not working

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the expected behavior?

Hi there, I'd like to start by saying wonderful job on this library and everything looks amazing. I've looked everywhere relevant I can find in both the docs and source and can't see an option to give an i-input type="password", or a separate component to do essentially the same.

Themes were disabled when switching to the new version of Inkline. Rewrite them.

• I'm submitting a:

  • Bug Report

• What is the current behavior?
  The navbar nav placement does not work

• What is the expected behavior?
  The should be positionned on the right of the navbar
  It seems that some classes are missing

<i-navbar-brand to="/">FLOWOLF</i-navbar-brand>
  <i-navbar-items class="_justify-content-end">
    <i-nav>
      <i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
      <i-nav-item :to="{ name: 'about' }">About</i-nav-item>
      <i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
    </i-nav>
</i-navbar-items>

The result is that the is still on the left of the navbar.

• Please tell us about your environment:

  • Version: 1.0.0
  • Browser: [Chrome Version 73.0.3683.103 (Build officiel) (64 bits) ]
  • Language: [VueJS]

• Other information
  I simply execute npm install @inkline/inkline

• I'm submitting a:

  • Bug Report
  • Feature Request

This would probably increase adoption.

I wrote the project styles in Stylus simply because it's what I expected the SASS Indented syntax to be.

SASS ended up being the most used and appreciated option in State of CSS, while Stylus is the last. https://2019.stateofcss.com/technologies/pre-post-processors/

Everything written in Stylus would probably require minor changes to be turned into SASS (indented syntax).

Should we switch to SASS?

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  Select component (dropdown) does not have cursor: pointer to indicate it is interactable. Not consistent with other UI elements.

• What is the expected behavior?
  Hovering the dropdown should change the cursor to the hand icon.

• Please tell us about your environment:
  https://inkline.io/docs/forms/select on Chrome 76, W10.

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  Clearable input icon doesn't use Inkline icons and looks bad.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  Clearable input icon should be using the times icon.

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  When clicking on the "plus/minus" buttons of an i-input-number element, it submits the form. I.e.: https://codepen.io/mtancoigne/pen/KLMpLZ

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  When clicking on the "plus/minus" buttons of an i-input-number element, the form should not be submitted.

• Please tell us about your environment:

  • Version: 1.14.0
  • Browser: Chrome XX, Firefox XX, not tested on the other
  • Language: ES6 and vanillaJS, not tested on other

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)
  None

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  Importing Inkline in a Vue project makes the the compiled "application.js" grow from 783kb to 3.05Mb (without using it).

• What is the expected behavior?
  It would be great if we could only import the components we need.

• I'm submitting a:

• Bug Report
• Feature Request

• What is the current behavior?
  Nuxt compilation crashes at a brand new install.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** via https://plnkr.co or similar.)

The following path, provided for Nuxtjs in the docs does not exist:
Link: https://inkline.io/docs/introduction/installation

Code:

module.exports = {
    modules: [ '@inkline/inkline/nuxt' ]
}

• Please tell us about your environment:

  • Version: 1.15.2
  • Browser: [all]

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

Changing /nuxt for nothing or /src also brings errors.

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

Styles are mainly scoped in components, which makes them to customize.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

It would be great to be able to customize the framework.

• Other information

I'm used to import stylesheets and modify variables before the imports:

// well...
@import 'custom_vars';
// Inkline core, components, ...
@import '~inkline/xxx/variables';
@import '~inkline/xxx/base';
@import '~inkline/xxx/xxx';

// Custom overrides
@import 'overrides/xxx';
// ...

I expect the custom vars to be applied in Inkline components, which is not the case: styles inside components have their own imports, and customizations are not available (variants, colors, etc...)

A possible solution would be to extract the style from the components and provide some files that the dev can pick (i.e.: everything, core only, etc...)

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  When submitting a form with no schema defined, it fails with the following console error:

TypeError: "this.schema.validate is not a function"

I.e.: https://codepen.io/mtancoigne/pen/xNOwKe?editors=1111

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  If we don't use validation, we don't want our forms to be validated

• Please tell us about your environment:

  • Version: 1.14.0
  • Browser: Chrome XX, Firefox XX, not tested on the other
  • Language: ES6 and vanillaJS, not tested on other

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)
  None

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  Looking for a simpler way for the user to select date/time for form input.

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

A calendar component would make it easier to accept date/time inputs from the user. Please use a light weight library to reduce component size. dayjs?

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  There is a lot of code duplication for importing/exporting and registering components.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  Have one place for importing/exporting components, preferably in src/components/index.js.

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

Form validation is only on blur and input events.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

I'd like to validate manually when I decide to with something like this.$form.validate(this.inputs). To be really great, the validate() method should return a promise, to allow custom validators to execute (i.e.: remote validation).

See where improvements are needed as we proceed with writing the typography documentation.

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

Currently, swiping/scrolling while a modal is shown scrolls the faded page in the background.

• What is the expected behavior?

While a modal is shown, scrolling/swiping the page in the background should be disabled.

• Please tell us about your environment:

  • Version: 1.14.2
  • Browser: [Chrome | iOS 12.3 Safari]

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • [*] Bug Report
  • Feature Request

• What is the current behavior?

Treeshaking compiling produces error as below:

Module parse failed: Unexpected token (5:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export class PopupManager {

instances = {};

| modalStack = [];
| zIndex = 1000;

@ ./node_modules/@inkline/inkline/src/helpers/index.js 21:0-57 21:0-57
@ ./node_modules/@inkline/inkline/src/components/Select/script.js?vue&type=script&lang=js&
@ ./node_modules/@inkline/inkline/src/components/Select/script.js?vue&type=script&lang=js&
@ ./node_modules/@inkline/inkline/src/components/Select/index.vue
@ ./node_modules/@inkline/inkline/src/components/index.js
@ ./node_modules/@inkline/inkline/src/index.js

• Please tell us about your environment:

  • Version: 1.0.0
  • 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 ]

• package.json file

{
"name": "inkline.test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@inkline/inkline": "^1.16.12",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"sass-resources-loader": "^2.0.1",
"resolve-url-loader": "^3.1.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

main.js

import Vue from 'vue'

import Inkline from '@/plugins/inkline.js'

import App from '@/layout/App.vue'
import router from '@/router'
import store from '@/store'

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

@/plugin/inkline.js

import Vue from 'vue';
import '@inkline/inkline/src/index.scss';
import { Inkline, IButton, IForm, IInput } from '@inkline/inkline/src/index';

Vue.use(Inkline, {
components: [
IButton,
IForm,
IInput
]
});

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

When I go to the icon documentation there are only a few icons shown for use. It doesn't contain a full list of available icons.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

A full list of all available icons or a link to which icons are available.

• Please tell us about your environment:

  • Version: 1.0.0
  • 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 (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

I'm trying to figure out the best way to use icons for this framework. Are the icons on the documentation page the only icons available currently? Or do you have a link that shows a full list? I'm wondering if I should install Font Awesome for now instead?

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  I would like to be able to control collapsing the items when an item is clicked. Right now it remains collapsed even after you clicked 1 item.
  

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

• Please tell us about your environment:

  • Version: 1.0.0
  • 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 (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

• Please tell us about your environment:

  • Version: 1.0.0
  • 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 (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

Hi,

First of all, great job on this library. I just wanted to request a feature as described in the title. It would be nice to have a loading indicator similar to Semantic UI's button.

There are a few loading indicator libraries for Vue, however some are outdated or don't necessarily fit with Inkline's theme. I believe it would be best for this library to provide it's own loading indicator component, just like the progress bar that is provided out of the box.

Thanks!

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  When changing the filters for the i-select-option during runtime, this error is produced:
  
  The current behavior of the select is that the value selected is not correct. See this JS fiddle for the difference between normal select and i-select.
  https://jsfiddle.net/816d9skh/

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  The select should be able to update based on filters that are dynamic (computed filters as well).

• Please tell us about your environment:

  • Version: CDN
  • Browser: Chrome 74.0.3729.169 | Mobile Chrome XX
  • Language: ES6/7

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

Need to write integration tests to make sure integration is working properly for:

• npm installation
• vue cli plugin
• nuxt module

We should probably use Cypress for it.

• I'm submitting a:

  • Bug Report
  • Feature Request

Select attributes are bound to inner child. We should bind them to the parent wrapper and add props such as placeholder for the child input instead.

• I'm submitting a:

  • Bug Report
  • Feature Request

We can see in some examples of the documentation that there are some helpers classes like the following _text-center _text-white.

I think it would be nice if there was a section in the documentation that would refer to these different classes so we don't have to inspect the code source or create our own classes.

I see that the Typography section already details some of these classes but they're not all there.

This is open for discussion.

Scenario: writing 55 into an input with a maximum value of 10 will change the value to 10.

Current behavior
Right now, writing a number larger than the max specified value will resolve to the maximum value. Writing 55 will change the value to 10.

Possible behavior
We could ignore inputting the second 5 and leave the value as 5 instead of changing to 10.

Is the current behavior good from an User Experience point of view?

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

There's only a "sm" size for UI elements (buttons/inputs,...) which is pretty big

• What is the expected behavior?

It would be wonderful to have smaller UI elements to make compact UIs. We don't need to build interfaces for mobiles only (with finger accessible UI elements)

• Please tell us about your environment:

  • Version: current
  • Browser: n/a
  • Language: n/a

• Other information n/a

• Personal note InkLine is the best Vue UI framework I have tested; thank you all for your work !

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  The select option size does not change based on the select input size.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  The select option size should change the way item size changes for a dropdown.

• Please tell us about your environment:

  • Version: 1.15.4
  • Browser: [all ]
  • Language: [all ]

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

• Please tell us about your environment:

  • Version: 1.0.0
  • 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 (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  At the moment, only one append or prepend elements is supported. The border radius doesn't apply correctly and the elements start wrapping on smaller screens.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  When providing multiple elements via slot="append" or slot="prepend", they should be displayed properly, with correct border radius, correct height and no wrapping.

• Please tell us about your environment:

  • Version: 1.0.0
  • 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]

• I'm submitting a:

  • Bug Report
  • Feature Request

We need to document all of Inkline's SCSS configuration variables. This needs to be done on a new page under the Introduction section.

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?

When clicking on a dropdown item, @click event is ignored.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

The item should emit the event.

• Please tell us about your environment:

  • Version: 1.15.0
  • Browser: Firefox 68
  • Language: ES6/7

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

<template>
  <i-dropdown>
    <i-button variant="default">Press me</i-button>
    <i-dropdown-menu>
      <i-dropdown-item @click="handleClick">Some entry</i-dropdown-item>
    </i-dropdown-menu>
  </i-dropdown>
</template>
<script>
export default {
  name: 'MyComponent',
  methods: { handleClick () { console.log('click') } },
}
</script>

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  in a new Nuxt Project i want customize the colors and i follow the documentation, but when i run npm run dev the terminal throw me the next warning:
  
  i dont know wheter my config is wrong or i'm skiping some step

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  i've been following the documentation :
  https://inkline.io/docs/introduction/customization
  with an clean installation of nuxt (no other frameworks or plugins) and this is my configuration nuxt.config.js:

export default {
  mode: 'spa',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    '@inkline/inkline/nuxt',
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: '~/assets/variables.scss'
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  inkline: {
    treeShaking: true,
    scss: true
  },
  build: {
    transpile: ['@inkline/inkline'],
    extend(config, ctx) {
    }
  }
}

package.json:

{
  "name": "front-kbis",
  "version": "1.0.0",
  "description": "FrontEnd del proyecto K-Bis elaborado con NuxtJs",
  "author": "Isidro Martinez",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@inkline/inkline": "^1.17.3",
    "@nuxtjs/axios": "^5.3.6",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.0.0",
    "node-sass": "^4.13.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^8.0.0"
  }
}

• Please tell us about your environment:

  • Version: 1.17.3
  • Browser: [all]
  • Language: [ ES6/7 | ES5]

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)
  The app still loading in the browser and doesn't work, if i'm doing something wrong please help me to configure this amazing design framwork:
  

• Bug Report
• Feature Request

• What is the current behavior?
  Responsive table not working at all. Wrap the table with a div to make it responsive.

• I'm submitting a:

  • Bug Report
  • Feature Request

Add examples for full screen modal and form modal to the docs.

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the current behavior?
  When creating i-select elements with a default value, the label is not rendered. I.e. : https://codepen.io/mtancoigne/pen/LoZVOq

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)
  When creating a i-select element with a default value, the corresponding label should be displayed

• Please tell us about your environment:

  • Version: 1.14.0
  • Browser: Chrome XX, Firefox XX, not tested on the other
  • Language: ES6 and vanillaJS, not tested on other

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)
  None

• I'm submitting a:

  • Bug Report
  • Feature Request

Use the following article as a base for required features: https://uxdesign.cc/design-better-data-tables-4ecc99d23356

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • Bug Report
  • Feature Request

• I'm submitting a:

  • Bug Report
  • Feature Request

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

Use the code that is present on the tooltip and popover as a base. Add the same features to the dropdown component.