+ cliped content items in input

+ minor change in methods

DropDownInput/ChoosedTagItemsView.qml

@@ -6,15 +6,21 @@ Flow{
     property var tagChoosed:[];
     signal deleteRequested(string nameDeleted)
 
-    QtObject
+    signal addedNewChoosedTag(string name)
+    signal deletedChoosedTag(string name)
+
+    Item
     {
         id:privateProps
-        property ListModel tags: ListModel { };
-        onTagsChanged: {
-            for(var i = tagChoosed.length; i != 0; --i)
-                tagChoosed.pop();
-            for(var j = 0; j < tags.count; ++j)
-                tagChoosed.push(model.get(i).name);
+        property ListModel tags: privTags;
+        ListModel {
+            id:privTags
+            onCountChanged: {
+                for(var i = totalChoosed.tagChoosed.length; i !== 0; --i)
+                    totalChoosed.tagChoosed.pop();
+                for(var j = 0; j < privateProps.tags.count; ++j)
+                    totalChoosed.tagChoosed.push(privateProps.tags.get(i).name);
+            }
         }
 
         function find(model, criteria) {
@@ -26,16 +32,20 @@ Flow{
     function push(itemText)
     {
         var found = privateProps.find(privateProps.tags, itemText);
-        if(found === null)
+        if(found === null){
             privateProps.tags.append({'name': itemText });
+            totalChoosed.addedNewChoosedTag(itemText);
+        }
         else
             console.log("Exist!");
     }
     function pop(itemText)
     {
         var found = privateProps.find(privateProps.tags, itemText);
-        if(found !== null)
+        if(found !== null){
             privateProps.tags.remove(found);
+            totalChoosed.deletedChoosedTag(itemText);
+        }
         else
             console.log("Not exist!");
     }

DropDownInput/TagItemInput.qml

@@ -3,71 +3,70 @@ import QtGraphicalEffects 1.15
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.5
 import ir.hcoding.models 1.0
- import QtQuick.Dialogs 1.3
+import QtQuick.Dialogs 1.3
 ScrollView {
     id:rootRectInput
-    implicitHeight: 50
-    function addToEditor(tagName){
-        editor.text = tagName;
-    }
-
+    height: 50
+    clip:true
+    contentItem.clip: true
+    implicitHeight: height
+    ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+    property bool multiLineTags: true  // ture-> tags will be in multiple line (width fixed)  , false-> tags will be in one line (height fixed)
     property var originModel:;
     property string currentText: editor.text
     property var tagChoosed: choosedView.tagChoosed;
     property bool activeSuggestions: editor.focus;
-    MouseArea{
-        anchors.fill: parent
-        onClicked: {
-            rootRectInput.focus=true;
-            mouse.accepted=false;
-        }
-    }
     background: Rectangle{
         radius:10
         color: "#2d2d2d"
     }
-
     layer.enabled: editor.focus
     layer.effect: Glow {
         radius: 14
         samples: 30
         color: "#4986b3"
         source: rootRectInput
     }
-    Flickable{
-        id:content
-        contentHeight: choosedView.height
-        width: parent.width
-        ChoosedTagItemsView {
-            id:choosedView
-            anchors.fill: parent;
-            TagEditor{
-                MessageDialog {
-                    id: messageDialog
-                    title: "Error"
-                    text: "The tag was not exist in tags!"
-                    onAccepted: {
-                        messageDialog.close();
-                    }
+    function addToEditor(tagName){
+        editor.text = tagName;
+    }
+    MouseArea{
+        anchors.fill: parent
+        onClicked: {
+            rootRectInput.focus=true;
+        }
+    }
+
+    ChoosedTagItemsView {
+        id:choosedView
+        width: rootRectInput.multiLineTags ? rootRectInput.width : rootRectInput.childrenRect.width * 1.5;
+        TagEditor{
+            MessageDialog {
+                id: messageDialog
+                title: "Error"
+                text: "The tag was not exist in tags!"
+                onAccepted: {
+                    messageDialog.close();
+                }
+            }
+            id:editor
+            onTextChanged: text= text.replace(/\s+/g,'')
+            function addTextToTags(){
+                if(editor.text.length == 0)
+                    return;
+                if(originModel.contains(editor.text))
+                {
+                    choosedView.push(editor.text)
+                    editor.text = "";
                 }
-                id:editor
-                onTextChanged: text= text.replace(/\s+/g,'')
-                function addTextToTags(){
-                    if(editor.text.length == 0)
-                        return;
-                    if(originModel.contains(editor.text))
-                    {
-                        choosedView.push(editor.text)
-                        editor.text = "";
-                    }
-                    else{
-                        messageDialog.open();
-                    }
+                else{
+                    messageDialog.open();
                 }
-
-                onAccepted: addTextToTags();
-                focus: rootRectInput.focus;
             }
+
+            onAccepted: addTextToTags();
+            focus: rootRectInput.focus;
         }
     }
     activeFocusOnTab: true

DropDownInput/TagItemsModel.cpp

@@ -70,13 +70,12 @@ void TagItemsModel::generateHeader()
         ++i)
     {
         setHeaderData(0, Qt::Horizontal, _roles[i], i);
-        qDebug() << headerData(0, Qt::Horizontal, i);
     }
 }
 
 bool TagItemsModel::contains(const QString& name)
 {
-    for(auto const& item : _tagItems)
+    for(auto const& item : qAsConst(_tagItems))
     {
         if(item == name)
         {

main.qml

@@ -9,14 +9,13 @@ Window {
     height: 500
     visible: true
     title: qsTr("DropDown Test")
-
     Item{
         TagItemsModel {
             // Example (original & init original data):
             id: tagListModel;
             function makeid(length) {
                 var result           = '';
-                var characters       = 'abcd';
+                var characters       = 'abcdefg1234567890';
                 var charactersLength = characters.length;
                 for ( var i = 0; i < length; i++ ) {
                     result += characters.charAt(Math.floor(Math.random() *
@@ -26,11 +25,10 @@ Window {
             }
 
             Component.onCompleted: {
-
                 var x = tagListModel.createTagItem();
-                for(var i = 0; i<8;++i)
+                for(var i = 0; i<25;++i)
                 {
-                    x.name = tagListModel.makeid(5);
+                    x.name = tagListModel.makeid(12);
                     x.description = "Description: This is simple text to Show QML power.This is simple text to Show QML power.";
 
                     x.link = '<html><style type="text/css"></style><a href="http://hcoding.ir">HCoding</a></html>';