1. Home
  2. Forum
  3. Blazor
  4. Issue implementing a sfTextbox base search field

Issue implementing a sfTextbox base search field

Hi,

I'm trying to implement a search fields using a sfTextbox but I've run into a couple of issues

<SfTextBox Width="300px" @onkeypress="@onKeyPressEventGlobalSearch" @onmousedown="@onMouseDownEventGlobalSearch"  @onclick="@onClickGlobalSearch" ShowClearButton="true" Placeholder="Global Search" Created="@onCreateGlobalSearch" @ref="@GlobalSearch"></SfTextBox>

public void onCreateGlobalSearch()
    {
        this.GlobalSearch.AddIcon("append", "e-search-icon");
    }

<style>
    .e-search-icon::before {
        content: '\e724';
        font-family: e-icons;
    }
</style>



I've appended the search icon in the Create event but noticed a couple of problems 

1) The hover image is not fully covering the white background of the text box.
2) I can't capture the mouse down event over the search icon. I've tried both @onmousedown and @onclick and they only respond when over the textbox element.

The demo (https://blazor.syncfusion.com/demos/textbox/default-functionalities?theme=bootstrap4) for sfTextbox uses the AddIcon feature and 1) is fine and 2) the mouse down over the icon causes a border to be displayed around both the textbox and the icon 

Regards,
Mike



17 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team October 13, 2020 02:37 PM UTC

Hi Michael, 


Greetings from Syncfusion support. 


Query 1: The hover image is not fully covering the white background of the text box. 
 
 
We are currently checking the feasibility for the reported requirement. We will update further details within 2 business days (15th, October 2020). We appreciate your patience until then. 


Query 2: I can't capture the mouse down event over the search icon. I've tried both @onmousedown and @onclick and they only respond when over the textbox element 

 
We have validated the requested requirement and considering “Provide support for event handling on added icon using addIcon method” as a feature in our end. This support will be included in any one of our upcoming releases.     
     
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link.    
     
 
 
Regards, 
Sevvandhi N 


SN Sevvandhi Nagulan Syncfusion Team October 15, 2020 01:15 PM UTC

Hi Michael, 


Thanks for the patience. 


We can reproduce the reported issue in 150% scaling in the system by default. However, if we change the system scaling to 100%, then the issue can be seen after zooming the screen. Also, if we set the browser zoom to 200%, then reported issue is not reproduced. So, we will analyze the issue further and update the details with in another 2 business days(19th October,2020). We appreciate your patience until then. 


Regards, 
Sevvandhi N    


SN Sevvandhi Nagulan Syncfusion Team October 21, 2020 03:11 PM UTC

Hi  Michael, 


We are still complexity while validating the reported queries in our end.  We need additional two days for validating the issue.  We will update further details within 2 business days(23rd, October 2020). We appreciate your patience until then. 



Regards, 
Sevvandhi N 


SN Sevvandhi Nagulan Syncfusion Team October 29, 2020 07:14 AM UTC

Hi Michael, 


Thanks for the patience. 


The reported issue occurs in the chrome browser alone. So, we have raised the issue in the stack overflow and chrome support. We will update you once we have the answer. Please find the issue details from the link. 





Regards, 
Sevvandhi N 


MA Michael Aston October 29, 2020 10:21 AM UTC

Hi,

The backgound coverage is better in firefox but there is still a one pixel border around the image and also the mouse click event is still not propagated to entryfield.

The samples links you've posted work fine for me in all browsers except for the 1px border and no click event propagation. I wonder if the issue with Chrome is only an issue when the textbox is in a toolbar.

What I'm trying to do is to replicate the default toolbar searchfield but as I need other templated items I'm unable to use it, unless you know a way of mixing templated and default items.

Regards,
Mike



SN Sevvandhi Nagulan Syncfusion Team October 30, 2020 12:03 PM UTC

Hi Michael, 


We have checked the reported requirement. We would like to notify you that without placing the component inside the toolbar, we can directly replicate the reported problem in the textbox component. Could you please elaborate your use cases to check the possibilities for your requirement?. Please share the requirement with the screenshot, if possible. It will help us to proceed further. 



Regards, 
Sevvandhi N 


MA Michael Aston November 8, 2020 08:50 PM UTC

Hi,

I'm trying to replicate the search field functionality from the toolbar on the datagrid control in the toolbar control.

Regards,
Mike

 

SN Sevvandhi Nagulan Syncfusion Team November 12, 2020 11:30 AM UTC

Hi Michael, 



We checked the reported requirement.  We can type a in the textbox component. For filtering functions, we have the AutoComplete component. We recommend that you try to control whether or not it meets your requirements. 


Please find the demo sample. 



Please check the above sample and get back to us if you need further assistance. 


Regards, 
Sevvandhi N 


MA Michael Aston November 12, 2020 11:43 AM UTC

Hi,

Sorry but you've need to read the trail on this. There are two issues:

1) The append icon added through Addicon leaves a white border around the icon. The one in the datagrid toolbar DOES NOT.
2) Clicking on the icon does not pass the click event through to the sfTextbox so I can't trigger the search. The one in the datagrid toolbar DOES trigger the search.

How can a replicate these two items of functionality in a templated toolbar control?

Regards,
Mike

PM Ponmani Murugaiyan Syncfusion Team November 13, 2020 11:36 AM UTC

Hi Michael, 

Thanks for the update. 

Query1: The append icon added through Addicon leaves a white border around the icon. The one in the datagrid toolbar DOES NOT. 
 
The reported issue occurs in the chrome browser. So, we have raised the issue in the stack overflow and chrome support. We will update you once we have the answer. Please find the issue details from the link.   


Query2: Clicking on the icon does not pass the click event through to the sfTextbox so I can't trigger the search. The one in the datagrid toolbar DOES trigger the search. 
 
We have already considered the reported requirement “Provide support for event handling on added icon using addIcon method” as a feature in our end. This support will be included in any one of our upcoming releases.      
      
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link.     
      

We appreciate your patience until the feature implementation. Please get back us if you need further assistance. 

Regards, 
Ponmani M 


MA Michael Aston November 13, 2020 12:06 PM UTC

Hi,

I've looked at this again and think issue in Query 1 is that the textbox is on a black background and what I'm seeing is the border around the textbox. Would you to able to provide some CSS to change the border of the textbox to black?

On query 2 I'd missed that a feedback item had already been raised. Do you know when this will be scheduled? It is a significant issue for me.

Thanks
Mike

 

SN Sevvandhi Nagulan Syncfusion Team November 16, 2020 12:42 PM UTC

Hi Michael, 


Query 1: I've looked at this again and think issue in Query 1 is that the textbox is on a black background and what I'm seeing is the border around the textbox. Would you to able to provide some CSS to change the border of the textbox to black? 
 
 
We are working on this issue. We will update the details shortly. 
 
 
Query 2:  On query 2 I'd missed that a feedback item had already been raised. Do you know when this will be scheduled? It is a significant issue for me. 



Sorry for the inconvenience.  

  

Currently there is no plan to include this feature in upcoming release. So, we will intimate you once road map has been prepared for this feature finalized in any one of our releases. 



Regards, 
Sevvandhi N 


SN Sevvandhi Nagulan Syncfusion Team November 16, 2020 02:15 PM UTC

Hi Michael, 


Sorry for the inconvenience caused. 


If we change the border color as well the reported issue will continue. Therefore, we are currently finding the best way to solve the problem in our end. We will update you once we have the answer. Please find the issue details from the link.  




Regards, 
Sevvandhi N 


MA Michael Aston November 16, 2020 02:33 PM UTC

Hi,

I don't really see problem you are referring to. The visual issue for me is the border colour. It would helpful if you could provide the class selector for the sfTextbox border colour.

Thanks
Mike 

SN Sevvandhi Nagulan Syncfusion Team November 17, 2020 10:03 AM UTC

Hi Michael, 


You can change the border color by overriding the below mentioned class.   


    .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) { 
        border-color: #33db1f; 
    } 
    .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { 
        border-color: #33db1f; 
    } 



If you want to change the focusing color, we suggest to use the below css code. 


   .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { 
        border-color: #33db1f; 
        box-shadow: 0 0 0 3px #33db1f; 
    } 


Please find the sample below, 




Let us know if you need any further assistance on this.  


Regards,  
Sevvandhi N 


Marked as answer
MA Michael Aston November 18, 2020 10:14 AM UTC

Thanks for the CSS, that has helped, but I do now see the problem in Chrome that you are referring to, so this remains important to us.

Thanks
Mike

SN Sevvandhi Nagulan Syncfusion Team November 19, 2020 08:07 AM UTC

Hi Michael, 



Thanks for the update. 


As we mentioned earlier, we are currently finding the best way to solve the problem in our end. We will update you once we have the answer.  We appreciate your patience until then. Please find the issue details from the link.   




Regards, 
Sevvandhi N 


Loader.
Up arrow icon