Losing $1.03M to Ugly Dropdowns? Build Custom Selection Widget in Odoo 18

your_module/
├── __manifest__.py
├── controllers/
│   └── main.py
├── static/
│   └── src/
│       ├── js/
│       │   └── custom_selection_widget.js
│       └── scss/
│           └── custom_selection.scss
└── views/
    └── custom_selection_templates.xml

/** @odoo-module **/
import publicWidget from "@web/legacy/js/public/public_widget";

publicWidget.registry.PortalCustomSelection = publicWidget.Widget.extend({
    selector: '.custom-select-dropdown',
    events: {
        'click .select-button': '_onToggleDropdown',
        'click .select-dropdown li': '_onSelectOption',
        'keydown .select-button': '_onButtonKeydown',
        'keydown .select-dropdown li': '_onOptionKeydown',
    },

    start() {
        this.$button = this.$el.find('.select-button');
        this.$dropdownArea = this.$el.find('.dropdown-area');
        this.$dropdown = this.$el.find('.select-dropdown');
        this.$options = this.$el.find('.select-dropdown li');
        this.$selectedValue = this.$el.find('.selected-value');
        
        this._onDocumentClick = this._onDocumentClick.bind(this);
        document.addEventListener('click', this._onDocumentClick);
        return this._super(...arguments);
    },

    destroy() {
        document.removeEventListener('click', this._onDocumentClick);
        this._super(...arguments);
    },

    _onDocumentClick(ev) {
        if (!this.el.contains(ev.target)) {
            this._toggleDropdown(false);
        }
    },

    _onToggleDropdown(ev) {
        ev.preventDefault();
        const isOpen = this.$dropdownArea.hasClass('hidden');
        this._toggleDropdown(isOpen);
    },

    _onButtonKeydown(ev) {
        if (ev.key === 'Enter' || ev.key === ' ') {
            ev.preventDefault();
            this._onToggleDropdown(ev);
        }
    },

    _onOptionKeydown(ev) {
        const $current = $(ev.currentTarget);
        const index = this.$options.index($current);
        
        if (ev.key === 'Enter' || ev.key === ' ') {
            ev.preventDefault();
            this._selectOption($current);
        } else if (ev.key === 'ArrowDown') {
            ev.preventDefault();
            const $next = this.$options.eq((index + 1) % this.$options.length);
            $next.focus();
        } else if (ev.key === 'ArrowUp') {
            ev.preventDefault();
            const $prev = this.$options.eq((index - 1 + this.$options.length) % this.$options.length);
            $prev.focus();
        } else if (ev.key === 'Escape') {
            ev.preventDefault();
            this._toggleDropdown(false);
            this.$button.focus();
        }
    },

    _onSelectOption(ev) {
        const $option = $(ev.currentTarget);
        this._selectOption($option);
    },

    _toggleDropdown(show) {
        this.$dropdownArea.toggleClass('hidden', !show);
        this.$button.attr('aria-expanded', show);
        this.$el.toggleClass('border-primary', show);
        if (show) {
            this.$options.first().focus();
        }
    },

    _selectOption($option) {
        const value = $option.data('value');
        const label = $option.text().replace(/\s*<i.*?>.*?<\/i>\s*/g, '');
        
        this.$options.find('.fa-check').remove();
        $option.prepend('<i class="fa-solid fa-check me-1"></i>');
        
        this.$options.removeClass('selected').attr('aria-selected', 'false');
        $option.addClass('selected').attr('aria-selected', 'true');
        
        this.$selectedValue.text(label);
        const $input = this.$('.dropdown-value-input');
        $input.val(value).trigger('change');
        
        this._toggleDropdown(false);
        this.$button.focus();
    },
});

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="custom_dropdown_template" name="Custom Dropdown">
        <div class="custom-select-dropdown" 
             t-attf-id="dropdown-#{dropdown_id or 'default'}">
            
            <input type="hidden" 
                   t-att-name="dropdown_name" 
                   t-att-id="input_id" 
                   class="dropdown-value-input" 
                   t-att-value="selected_value or ''" 
                   t-att-required="required"/>
            
            <button type="button" 
                    class="select-button" 
                    aria-expanded="false" 
                    aria-haspopup="listbox">
                <span class="selected-value">
                    <t t-esc="selected_label or 'Select an option'"/>
                </span>
                <i class="arrow fa-solid fa-caret-down"></i>
            </button>
            
            <div class="dropdown-area hidden">
                <ul class="select-dropdown" role="listbox">
                    <t t-out="0"/>
                </ul>
            </div>
        </div>
    </template>
</odoo>

.custom-select-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    .select-button {
        width: 100%;
        padding: 8px 12px;
        background-color: #ffffff;
        border: 1px solid #d0d5dd;
        border-radius: 6px;
        font-size: 14px;
        color: #344054;
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        min-height: 40px;
        box-sizing: border-box;
    }

    .select-button:hover {
        border-color: #b0b7c3;
    }

    .select-button:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .selected-value {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #374151;
        font-weight: 400;
    }

    .arrow {
        color: #6b7280;
        font-size: 12px;
        margin-left: 8px;
        transition: transform 0.2s ease;
    }

    .select-button[aria-expanded="true"] .arrow {
        transform: rotate(180deg);
    }

    .dropdown-area {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                    0 2px 4px -1px rgba(0, 0, 0, 0.06);
        margin-top: 2px;
        max-height: 200px;
        overflow-y: auto;
    }

    .dropdown-area.hidden {
        display: none;
    }

    .select-dropdown {
        list-style: none;
        padding: 4px 0;
        margin: 0;
    }

    .select-dropdown li {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 14px;
        color: #374151;
        display: flex;
        align-items: center;
        transition: background-color 0.15s ease;
    }

    .select-dropdown li:hover {
        background-color: #f3f4f6;
    }

    .select-dropdown li.selected {
        background-color: #eff6ff;
        color: #1d4ed8;
    }

    .select-dropdown li:focus {
        outline: none;
    }

    @media (max-width: 768px) {
        .custom-select-dropdown {
            width: 100%;
        }
    }
}

{
    'name': 'Custom Selection Field Module',
    'version': '1.0',
    'category': 'Website',
    'summary': 'Custom dropdown component for Odoo website',
    'depends': ['web', 'website'],
    'assets': {
        'web.assets_frontend': [
            'your_module/static/src/scss/custom_selection.scss',
            'your_module/static/src/js/custom_selection_widget.js',
        ],
    },
    'data': [
        'views/custom_selection_templates.xml',
    ],
    'installable': True,
    'application': False,
}

<t t-call="your_module.custom_dropdown_template">
    <t t-set="dropdown_id" t-value="'statusSelect'"/>
    <t t-set="selected_label" t-value="'Select status'"/>
    <t t-set="input_id" t-value="'select_state'"/>
    <t t-set="required" t-value="True"/>
    <t t-set="dropdown_name" t-value="'state'"/>
    
    <t t-foreach="selections" t-as="selection">
        <li role="option" 
            t-att-aria-selected="item_obj and selection[0] == item_obj.state and 'selected'" 
            t-att-data-value="selection[0]" 
            t-attf-tabindex="0" 
            t-esc="selection[1]"/>
    </t>
</t>

from odoo import http
from odoo.http import request

class MyWebsiteController(http.Controller):
    
    @http.route('/my/page', type='http', auth='public', website=True)
    def render_my_page(self, **kw):
        # Fetch data from Odoo model
        statuses = request.env['my.model.name'].search_read(
            [], ['name', 'id']
        )
        
        # Or use static list
        # statuses = [
        #     {'id': 'draft', 'name': 'Draft'},
        #     {'id': 'confirmed', 'name': 'Confirmed'},
        #     {'id': 'cancelled', 'name': 'Cancelled'},
        # ]
        
        return request.render('your_module.my_custom_page_template', {
            'statuses': statuses,
            'selected_status_id': 'draft',
        })

<template id="my_custom_page_template" name="My Custom Page">
    <t t-call="website.layout">
        <div id="wrap">
            <div class="container">
                <h1 class="mt-4">My Custom Page</h1>
                
                <form action="/my/page/submit" method="post">
                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                    
                    <t t-call="your_module.custom_dropdown_template">
                        <t t-set="dropdown_id" t-value="'statusSelect'"/>
                        <t t-set="selected_label" t-value="'Select option'"/>
                        <t t-set="input_id" t-value="'select_state'"/>
                        <t t-set="required" t-value="True"/>
                        <t t-set="dropdown_name" t-value="'state'"/>
                        
                        <t t-foreach="statuses" t-as="state">
                            <li role="option" 
                                t-att-aria-selected="selected_status_id and state['id'] == selected_status_id and 'selected'" 
                                t-att-data-value="state['id']" 
                                t-attf-tabindex="0" 
                                t-esc="state['name']"/>
                        </t>
                    </t>
                    
                    <button type="submit" class="btn btn-primary mt-3">Save</button>
                </form>
            </div>
        </div>
    </t>
</template>