Styles when using data-te-select is not taking effect on dynamic rendering

[ikmndz-rci]

Using VueJs, I created a Modal Component with TWE and is designed to submit a form/s. Inside the modal I also used dynamic Tabbed interface to handle multiple forms. My problem is rendering the select in the dynamic Tab/Form.

sample:
I have this array as my default form

sampleForm: [{
                id: 'form-0', title: 'Form 1',
                select_input: '', fname: '', lname: '', dob: ''
            }]

and this the method that handles the addition of a new form

addExpense () {
    let expenses = this.expenses;
    this.expenses = [];

    let newExpense = {
        id: 'claim-' + expenses.length + 1,
        title: 'Claim ' + (expenses.length + 1),
        loa_number: '', service_date: '', facility: '', facility_name: '', specialty: '', doctor: '',  doctor_name: '',
        procedure: [{
            chief_complaint: '', diagnosis: '', service: [{
                name: '', amount: ''
            }]
        }],
        total_amount: 0,
        total_service_amount: 0,
    };
    expenses.push(newExpense);

    this.expenses = expenses;
}

I also tried to create a component for te-select which already has the attributes for rendering the te-select and that's the one I called in my dynamic tab/form.

Thank you.

[iprzybysz]

Hi, if you have a select element inside a modal, and the modal shows and hides along with the select, you need to reinitialize the select whenever the modal is shown. Check out Select with search inside a modal example in TWE Documentation. Try using the getOrCreateInstance method when the modal is shown. If that doesn't work, create a code snippet demonstrating your implementation.

[ikmndz-rci]

is getOrCreateInstance a TWE function?

[iprzybysz]

Yes, check out Select API Documentation.