Onfocus function in Select2 input

Question

I have a form where each field has a save action, is a "form".

For this, each time I select a field, a save and cancel button appears to it.

Meanwhile, with a field select2, these buttons do not appear, the onfocus is not activated.

Can someone help me?

<!-- função exibe / oculta botões -->
<script>
    function acao(input){
        // Quebra condicionais recebidas do campo em que se está trabalhando
        var split = input.split(';');

        if (split[0] == 1) {
            // Exibe botões
            document.getElementById('div'+split[1]).style.display = 'block';

        } else {
            // Oculta botões
            document.getElementById('div'+split[1]).style.display = 'none';
        }
    }
</script>

<!-- select comum  -->
<select id="teste" onfocus="acao('1;teste')">
    <option value="id1">nome1</option>
    <option value="id2">nome2</option>
    <option value="id3">nome3</option>
</select>

<!-- Botões de ações para o select -->
<div id="divteste" style="display:none">
    <button type="button">Salvar</button>
    <button type="button" onclick="acao('0;teste')">Cancelar</button>
</div>

<hr>

<!-- select2 comum, funciona  -->
<select class="teste2" onfocus="acao('1;teste2')">
    <option value="id1">nome1</option>
    <option value="id2">nome2</option>
    <option value="id3">nome3</option>
</select>

<!-- Botões de ações para o select -->
<div id="divteste2" style="display:none">
    <button type="button">Salvar</button>
    <button type="button" onclick="acao('0;teste2')">Cancelar</button>
</div>

<!-- libs -->    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<!-- Chamada select2, não funciona -->
<script type="text/javascript">
    $('.teste2').select2();
</script>

Answer 1

In your case, use the event: select2:opening, added to your code below.

Select2:Opening is fired before the drop-down menu opens.

The Select2 will trigger some different events when different actions are executed using the component, allowing you to add custom hooks and perform actions. You can also manually trigger these events in a control Select2 using .trigger.

Excerpt added:

$('.teste2').select2().on('select2:opening', function (e) {
    acao('1;teste2')
});

---

Code:

function acao(input){
        // Quebra condicionais recebidas do campo em que se está trabalhando
        var split = input.split(';');

        if (split[0] == 1) {
            // Exibe botões
            document.getElementById('div'+ split[1]).style.display = 'block';

        } else {
            // Oculta botões
            document.getElementById('div'+ split[1]).style.display = 'none';
        }
    }

    //Código adicionado
    $('.teste2').select2().on('select2:opening', function (e) {
        acao('1;teste2')
    });

<!-- função exibe / oculta botões -->
<!-- select comum  -->
<select id="teste" onfocus="acao('1;teste')">
    <option value="id1">nome1</option>
    <option value="id2">nome2</option>
    <option value="id3">nome3</option>
</select>

<!-- Botões de ações para o select -->
<div id="divteste" style="display:none">
    <button type="button">Salvar</button>
    <button type="button" onclick="acao('0;teste')">Cancelar</button>
</div>

<hr>

<!-- select2 comum, funciona  -->
<select class="teste2">
    <option value="id1">nome1</option>
    <option value="id2">nome2</option>
    <option value="id3">nome3</option>
</select>

<!-- Botões de ações para o select -->
<div id="divteste2" style="display:none">
    <button type="button">Salvar</button>
    <button type="button" onclick="acao('0;teste2')">Cancelar</button>
</div>

<!-- libs -->    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

In the pages below, there are other examples of events:

Source:
https://select2.org/programmatic-control/events#sidebar-toggle
https://select2.org/programmatic-control/events

Answer 2

hello, thank you so much for your help!