Issue with Semantic UI causing <select> elements to not update properly

Question

Issue with Semantic UI causing <select> elements to not update properly

We're facing an issue with a popup that contains a form consisting of several <select> tags. Sometimes, these <select> elements appear on the page without any specified <option> tags and are filled in later on. Some already have predefined <option>s. In all scenarios, there is a possibility of adding or removing <option>s from the <select> elements. Currently, we are integrating Semantic UI to define these <select> tags as shown below:

<select id="select1" class="ui dropdown"></select>

The challenge we're encountering is that the created dropdowns (referred to as "menu") are not getting updated when changes occur in the underlying <select> element. Is there a specific function that needs to be invoked when adding or removing <option>s?

UPDATE: In an attempt to address this issue, I tested the following:

$('#select1').dropdown('refresh')

Unfortunately, the semantic UI menu did not reflect any updates.

UPDATE 2 It's worth noting that in some instances, the <option>s are toggled by changing their display property to none instead of physically removing them from the <select> tag. Conversely, in other cases, they are indeed added or removed from the list. Can Semantic UI effectively handle both of these scenarios?

javascript html css semantic-ui

Answer 1

Answer №1

After deciding to move forward, I took the initiative to create a proof-of-concept to explore potential solutions. Using a mutationobserver, I monitored changes in the attributes of each <select> element within the popup and synchronized the display property with the semantic ui "menu". So far, the implementation seems to be effective.

function implementSelectMutationObserver()
{
    //create observer
        var observer = new MutationObserver(function(mutations){
            //console.log(mutations)

            //get changed element in select
                var target_el = mutations[0].target

            if(!getElement(target_el.parentNode))
            {
                return false
            }


            //find the changed <select>
                var sel = target_el.parentNode

            //make sure the parent is a <select>
                if(sel.nodeName != 'SELECT')
                {
                    return false
                }

            //get <select> wrapper created by semantic ui
                var wrapper = sel.parentNode

            //find the associated semantic menu
                var cur_menu = $(wrapper).children('.menu')

            if(getElement(cur_menu))
            {

                //get corresponding element to target element in semantic menu
                    var menu_el = $(cur_menu).children('div[data-value=' + target_el.value + ']')[0]

                //change the menu element to match the style of the <select> element
                    if(menu_el)
                    {
                        menu_el.style['display'] = target_el.style['display']
                    }

            }
        })

    //initialize config to look for changes to attributes
        var observer_config = {
            attributes: true,
        }

    //set observer on each <option>
        var target_nodes = getElement('my_popup').querySelectorAll('option') //document.body
        for(var x=0;x<target_nodes.length;x++)
        {
            observer.observe(target_nodes[x], observer_config)
        }
}

function getElement(el)
{
    if(document.getElementById(el))
    {
        return document.getElementById(el)
    }
    else if($(el).get(0))
    {
        return $(el).get(0)
    }
    else if((typeof el == 'object') && (Object.keys(el).length > 0))
    {
        return el
    }
    else
    {
        //console.log(el + ' not found')
        return false
    }
}

Answer 2

After deciding to move forward, I took the initiative to create a proof-of-concept to explore potential solutions. Using a mutationobserver, I monitored changes in the attributes of each <select> element within the popup and synchronized the display property with the semantic ui "menu". So far, the implementation seems to be effective.

function implementSelectMutationObserver()
{
    //create observer
        var observer = new MutationObserver(function(mutations){
            //console.log(mutations)

            //get changed element in select
                var target_el = mutations[0].target

            if(!getElement(target_el.parentNode))
            {
                return false
            }


            //find the changed <select>
                var sel = target_el.parentNode

            //make sure the parent is a <select>
                if(sel.nodeName != 'SELECT')
                {
                    return false
                }

            //get <select> wrapper created by semantic ui
                var wrapper = sel.parentNode

            //find the associated semantic menu
                var cur_menu = $(wrapper).children('.menu')

            if(getElement(cur_menu))
            {

                //get corresponding element to target element in semantic menu
                    var menu_el = $(cur_menu).children('div[data-value=' + target_el.value + ']')[0]

                //change the menu element to match the style of the <select> element
                    if(menu_el)
                    {
                        menu_el.style['display'] = target_el.style['display']
                    }

            }
        })

    //initialize config to look for changes to attributes
        var observer_config = {
            attributes: true,
        }

    //set observer on each <option>
        var target_nodes = getElement('my_popup').querySelectorAll('option') //document.body
        for(var x=0;x<target_nodes.length;x++)
        {
            observer.observe(target_nodes[x], observer_config)
        }
}

function getElement(el)
{
    if(document.getElementById(el))
    {
        return document.getElementById(el)
    }
    else if($(el).get(0))
    {
        return $(el).get(0)
    }
    else if((typeof el == 'object') && (Object.keys(el).length > 0))
    {
        return el
    }
    else
    {
        //console.log(el + ' not found')
        return false
    }
}

Issue with Semantic UI causing <select> elements to not update properly

Answer №1

Similar questions

Encasing event handler callback within Observable pattern

How to Achieve a Fixed Bottom Footer in Ember Framework

Is it true that when you return from a callback in JavaScript, it gives back

Struggling to make align-content function properly in a CSS flexbox layout grid

Tips for creating a multi-tenant application using Node.js (express.js)

Tips for resolving issues with dynamically displaying state information based on a selected country

Syntax in Next.js for shallow routing

Capture video frames from a webcam using HTML and implement them in OPENCV with Python

Utilizing Gigya API integration with node.js

Organized Styled-components

Using jQuery to apply a CSS class to a chosen radio button

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

What methods can be used to prevent divs from overlapping when the window size is reduced?

Create an unordered Vue component object

What could be causing the if/else block in my Redux Toolkit reducer to malfunction?

What is the process for utilizing "yarn create <pkg-name>" command?

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

PHP scripts for performing multiplication and subtraction operations

JavaScript - Modify input character prior to appending it to the text area

Inject CSS values dynamically