Dispaly issue inside Bootstrap 4 Modal

[cmusselm]

When putting the magicsearch box inside a bootstrap4 modal its appearance changes and isn't really usable.

When I have the magicsearch outside of the modal it displays as expected. Is there anything special that needs to be done to have it display properly inside a modal?

Partial HTML for the modal
`

Select the users to associate with this photo:

`

JQuery:
$('.magicsearch').magicsearch({ dataSource: dataSource, fields: ['userName'], id: 'id', hidden: true, multiple: true, showSelected: false, dropdownBtn: true, focusShow: true, multiField: 'userName', multiStyle: { space: 5, width: 80 } });

Any advice is appreciated.

Thanks,
Chad