Skip to content

Missing custom class in menu when using teleport="body" #322

@Finrod927

Description

@Finrod927

Vue3-Select-Component version

0.12.2

Link to minimal reproduction

https://play.vuejs.org/#eNqNVEtT2zAQ/is7vtAy2C6T9pKGDH1wKAfaIUx7qDsdx944AlnS6BEnE/zfu5JNcCAwvSTRah/fY5Vt9EmpZOUwGkcTU2imLBi0TgHPRXWWRdZk0TQTrFZSW9iCxgW0sNCyhiyiuiz6uLv96XCGHAs7uB/FJoTiQlKSQGFDRSYKKYyFVc4dwplvOzFWM1HBPQjH+fSN/3xLqZO0w0Uo6GCxVjy3SCeANIUrxBKshLykL5rkgRDsuSw3WQRzZ6GUaEBIC43Ud8AEUP2m0tKJ0veYPKL2R4BVXMsSOTUJ4LKoC4+lsowwU/x3FwGSg+dz5GM4usxX+SzAPDrpSFHw1hxBe/I8+Waj8FmyfSH52plhmvbHg4mzhi2GmSacd6l/HogQ/QKXkpeoiUtPPQelZaXzuvYWeO9dXu24Fzw3nnhBw2XdO9pdpsEWklFNu1ZkR6fUA5Dttnf5/p5WQtAOkDFtO0kVlU7SgaF0NHbDEUwhFZYUSfYmwjZMPIZf5KSBBRMIx6mPxfHKxHOpiVOs85I5M4bTd2pN6xMKvu7tQMPs8sCyDFp1DGKLa7+4XOoxbWhJ3dqwjx7kNDqJur2P61wlt0YKekMBYdZf0NMh+p2E/WMZ04+ltcqM07QoBZXRqrGVTgTaVKg6Pae0VDthWY1xKetzr42xacnoYxBP0NTxXMvGoKYuWdTbHOakFFx5KVCQIqj/d+6Tsr3ZT+5enX/o0Q8RNE2TOKHuqoQS0oMFe7MZzVzTxDDIzyEbWtLf0qKIBaueqO+bMI76e/di91zIOZfNZYhZ7XCHulhicXcgfmvWHfYfGoMEA6Y21xX21C5mV7Qsg0v6E3G8d/yFy2s0kjuPsUv7TH9JBHuQF9B+C8tE7/LGXKwtCvNAygMNaoT8oPyXV6g/wh0l7wcq/iVffU8ScJR8SE5HUfsPvuYNsg==

Note: repro is not working in playground because teleport="body" does not work in playground

Steps to reproduce

I am migrating from vue-select and found a little issue when customizing the styles.

When using teleport="body" the teleported menu does not have the custom class defined in component, making the style customization harder because it's not a child of div.vue-select.custom-select:

  <VueSelect 
    v-model="value"
    :options="[
      { label: 'JavaScript', value: 'js' },
      { label: 'TypeScript', value: 'ts' },
      { label: 'Rust', value: 'rust' },
      { label: 'Swift', value: 'swift' },
    ]"
    placeholder="Select a programming language"
    class="custom-select"
  />
Image

What is expected?

The custom class should be also added to the menu to be able to customize the style even if the menu is teleported

What is actually happening?

The custom class is not added to the menu, therefore customizing the style is much harder

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions