Skip to Content
OWL overlay

Dropdown Item

Odoo 19 OWL component — Dropdown Item (core)

Live preview Interactive
Source excerpt web/static/src/core/dropdown/dropdown_item.js
import { Component } from "@odoo/owl";
import { useDropdownCloser } from "@web/core/dropdown/dropdown_hooks";

const ClosingMode = {
    None: "none",
    ClosestParent: "closest",
    AllParents: "all",
};

export class DropdownItem extends Component {
    static template = "web.DropdownItem";
    static props = {
        tag: {
            type: String,
            optional: true,
        },
        class: {
            type: [String, Object],
            optional: true,
        },
        onSelected: {
            type: Function,
            optional: true,
        },
        closingMode: {
            type: ClosingMode,
            optional: true,
        },
        attrs: {
            type: Object,
            optional: true,
        },
        slots: { Object, optional: true },
    };
    static defaultProps = {
        closingMode: ClosingMode.AllParents,
        attrs: {},
    };

    setup() {
        this.dropdownControl = useDropdownCloser();
    }

    onClick(ev) {
        if (this.props.attrs && this.props.attrs.href) {
            ev.preventDefault();
        }
        this.props.onSelected?.(ev);
        switch (this.props.closingMode) {
            case ClosingMode.ClosestParent:
                this.dropdownControl.close();
                break;
            case ClosingMode.AllParents:
                this.dropdownControl.closeAll();
                break;
        }
    }
}
Registry / API
Registry name
DropdownItem
Category
Module
web
Slug
dropdown-item
Nav group
overlay