Пользователь, закрывающий элемент, не может щелкнуть за его пределами, потому что он открыт поверх другого элемента, который представляет собой диаграмму SVG

Question

У меня есть DatePicker, который показывает, когда я хочу выбрать daterange - это общий компонент, и я думал, что он работает нормально, пока я не проверю его в представлении, которое содержит большую диаграмму SVG - datepicker, когда он открыт, находится над этой диаграммой.

Библиотеки: 1) Daterangepicker - загрузчик даты-выбора (https://bootstrap -datepicker.readthedocs.io / en / latest / ) 2) Диаграмма - https://d3js.org/

Скриншоты:

1) Открыт пункт выбора даты 2) Проверен элемент SVG в Chrome DEV Tools

Код, когда я вызываю диаграмму:

<div class="ibox float-e-margins page-ibox">
    <div class="ibox-title">
        <div style="display: inline-block">
            <cb-toolbar [openDbModalFn]="openDatabaseModal"></cb-toolbar>
        </div>
        <iboxtools [closable]="false" [float]="'clear'"></iboxtools>
    </div>
    <div class="ibox-content" id="ifs-ibox-content">
        <div id="no-data-wrapper">

            <div id="no-data-overlay">
                <!-- <%=st.get("FILTERS_RETURNED_NO_DATA") %> -->
                {{ "FILTERS_RETURNED_NO_DATA" | translate }}
            </div>
            <cb-chord-diagram></cb-chord-diagram>
        </div>
    </div>
</div>

И код для выбора даты:

<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" id="dateFrom" autocomplete="off"/>
<span class="input-group-addon">{{translationService.translate("TO_LOWERCASE")}}</span>
<input type="text" class="input-sm form-control" id="dateTo" autocomplete="off"/>

То, что я уже пытался сделать, это то, что я проверил компонент, который строит диаграмму, чтобы найти там метод event.stopPropagation (), но его там нет. У меня нет других идей, что может быть не так.