I am completely new to magento ui-components and I don't know how to use them to make frontend changes. I am adding screenshot below to show what I am trying to achieve. Recently I have a task in which I need to show new shipping address form of modal(popup) right below all shipping addresses on checkout page.
Upon debugging, I found that the files responsible for handling modal(popup) for new shipping address comes through the use of ui-components.
This is the file that uses shippingFormTemplate to render the template inside modal popup.
I tried removing visible attribute from #opc-new-shipping-address element to show it on page.
<div id="opc-new-shipping-address" visible="isFormPopUpVisible()" render="shippingFormTemplate" />
and placed my custom button to save new address that is entered.
<div id="opc-new-shipping-address" render="shippingFormTemplate" /> <button class="action primary action-save-address" click="saveNewAddress"><span translate="'Save Address'" /></button>
But after that if I change address information inside form, selected-item class is removed from the address that is selected which is due to shipping rates calculation. I don't know how it is disabled for modal.
How do I turn off the modal so that new shipping address form just show below the all list of addresses on checkout shipping step?
Note: I don't want to use ugly css solution to bring fixed position modal form below other addresses anyhow.
Any help would be great.