import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
import MaterialIcons 2.2


/**
 * Basic SearchBar component with an appropriate icon and a TextField.
 */
FocusScope {
    property alias textField: field
    property alias text: field.text

    implicitHeight: childrenRect.height
    Keys.forwardTo: [field]

    function forceActiveFocus() {
        field.forceActiveFocus()
    }

    function clear() {
        field.clear()
    }

    RowLayout {
        width: parent.width

        MaterialLabel {
            text: MaterialIcons.search
        }

        TextField {
            id: field
            focus: true
            Layout.fillWidth: true
            selectByMouse: true

            // ensure the field has focus when the text is modified
            onTextChanged: {
                forceActiveFocus()
            }
        }
    }
}