Your Dropdown Takes 38 Seconds: Open Modal on Field Click in Odoo 18

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="location_modal_template" name="Location Selector Modal">
        <div id="location_temp" class="modal" style="display:none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Select Location</h4>
                        <button type="button" class="btn-close" id="dismiss" 
                                aria-label="Close"></button>
                    </div>
                    
                    <!-- Modal Body -->
                    <div class="modal-body">
                        <div class="row">
                            <!-- State Selector -->
                            <div class="col-md-6">
                                <label for="state_id" class="form-label">State</label>
                                <select id="state_id" class="form-select">
                                    <option value="">-- Select State --</option>
                                    <t t-foreach="states" t-as="state">
                                        <option t-att-value="state['id']" 
                                                t-esc="state['name']"/>
                                    </t>
                                </select>
                            </div>
                            
                            <!-- City Selector -->
                            <div class="col-md-6">
                                <label for="city_id" class="form-label">City</label>
                                <input type="text" id="city_id" 
                                       class="form-control" 
                                       placeholder="Enter city name"/>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" 
                                id="dismiss">Cancel</button>
                        <button type="button" class="btn btn-primary" 
                                id="submit_location">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
</odoo>

from odoo import http
from odoo.http import request

class LocationController(http.Controller):
    
    @http.route('/location/form', type='http', auth='public', website=True)
    def location_form(self, **kwargs):
        # Fetch states from res.country.state model
        states = request.env['res.country.state'].sudo().search([
            ('country_id.code', '=', 'US')  # Only US states
        ])
        
        state_list = [{
            'id': state.id,
            'name': state.name,
            'code': state.code
        } for state in states]
        
        return request.render('your_module.location_modal_template', {
            'states': state_list
        })

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

publicWidget.registry.LocationModal = publicWidget.Widget.extend({
    selector: '#whole_sub',  // Parent container
    events: {
        'click #location_id': '_onLocationClick',
        'click #submit_location': '_onSubmitClick',
        'click #dismiss': '_onCloseClick',
    },
    
    /**
     * Open modal when Location field is clicked
     */
    _onLocationClick(ev) {
        const modal = this.el.querySelector('#location_temp');
        modal.style.display = 'block';
    },
    
    /**
     * Close modal and transfer data to Location field
     */
    _onSubmitClick(ev) {
        const stateSelect = this.el.querySelector('#state_id');
        const cityInput = this.el.querySelector('#city_id');
        const locationField = this.el.querySelector('#location_id');
        
        // Get selected state name (not ID)
        const stateName = stateSelect.selectedOptions[0].text;
        const cityName = cityInput.value;
        
        // Validate inputs
        if (!stateName || stateName === '-- Select State --') {
            alert('Please select a state');
            return;
        }
        
        if (!cityName) {
            alert('Please enter a city');
            return;
        }
        
        // Update location field with formatted value
        locationField.value = `${stateName}, ${cityName}`;
        
        // Close modal
        this._closeModal();
    },
    
    /**
     * Close modal without saving
     */
    _onCloseClick(ev) {
        this._closeModal();
    },
    
    /**
     * Helper: Hide modal
     */
    _closeModal() {
        const modal = this.el.querySelector('#location_temp');
        modal.style.display = 'none';
    }
});

'assets': {
    'web.assets_frontend': [
        'your_module/static/src/js/location_modal.js',
    ],
},

import { jsonrpc } from "@web/core/network/rpc_service";

_onStateChange(ev) {
    const stateId = ev.target.value;
    
    if (!stateId) return;
    
    // Fetch cities for selected state
    jsonrpc('/location/get_cities', {
        state_id: stateId
    }).then(cities => {
        const citySelect = this.el.querySelector('#city_id');
        
        // Clear existing options
        citySelect.innerHTML = '<option value="">-- Select City --</option>';
        
        // Add new options
        cities.forEach(city => {
            const option = document.createElement('option');
            option.value = city.id;
            option.textContent = city.name;
            citySelect.appendChild(option);
        });
    });
}

@http.route('/location/get_cities', type='json', auth='public')
def get_cities(self, state_id, **kwargs):
    # Fetch cities for the given state
    # (Assuming you have a city model)
    cities = request.env['res.city'].sudo().search([
        ('state_id', '=', int(state_id))
    ])
    
    return [{
        'id': city.id,
        'name': city.name
    } for city in cities]