title: Allow only a single editable field at once in a custom component
body: <p>I am working in webforms and have a series of entry fields with follow the same pattern. They have a label to show the text which can toggle to a text field with a click of a button thereby saving it.</p>
  
  <p>I only want the user to have a single field being edited at once, such that if they begin editing a second field, the first field will save.</p>
  
  <p>My code as is:</p>
  
  <pre class="lang-cs prettyprint-override"><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  namespace vk_HVK_Web.User_Controls
  {
      [ValidationProperty("Text")]
      [ToolboxData("&lt;{0}:EditableLabel runat=server&gt;&lt;/{0}:EditableLabel&gt;")]
      public partial class EditableLabel : System.Web.UI.UserControl
      {
          public event EventHandler OnSave;
          public static EditableLabel CurrentEditing;
          public string DisplayText { get
              {
                  return this.Text.ToUpper();
              }
          }
          public string Text { get =&gt; txtInput.Text; set =&gt; txtInput.Text = value; }
  
          public bool Editable { get =&gt; txtInput.Visible; set =&gt; txtInput.Visible = value; }
  
          protected void Page_PreRender(object sender, EventArgs e)
          {
              if (Editable)
              {
                  txtInput.Visible = true;
                  lblText.Visible = false;
                  btnEditSave.CssClass = "fas fa-save";
                  sectionEditable.CssClass = "col";
              }
              else
              {
                  lblText.Visible = true;
                  txtInput.Visible = false;
                  btnEditSave.CssClass = "fas fa-pencil-alt";
                  sectionEditable.CssClass = "col col-form-label text-left";
              }
              lblText.Text = DisplayText;
          }
          protected void Page_Load(object sender, EventArgs e)
          {
  
          }
  
          protected void txtInput_TextChanged(object sender, EventArgs e)
          {
              this.Text = txtInput.Text;
          }
  
          protected void btnEditSave_Click(object sender, EventArgs e)
          {
              if (Editable)
              {
                  Save();
              } else
              {
                  Edit();
              }
  
          }
  
          public void Edit()
          {
              if (CurrentEditing != null &amp;&amp; CurrentEditing != this &amp;&amp; CurrentEditing.Editable)
                  CurrentEditing.Save();
              CurrentEditing = this;
              Editable = true;
          }
          public void Save()
          {
              Editable = false;
              if (OnSave != null)
                  OnSave(this, EventArgs.Empty);
          }
      }
  }
  </code></pre>
  
  <p>I don't believe the code from design is useful but here it is anyways:</p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditableLabel.ascx.cs" Inherits="vk_HVK_Web.User_Controls.EditableLabel" %&gt;
  &lt;div class="row"&gt;
                      &lt;div class="col-12"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-4 col-form-label text-right"&gt;Start Date: &lt;/div&gt;
                              &lt;asp:Panel runat="server" id="sectionEditable"&gt;
                                  &lt;asp:Label ID="lblText" runat="server" Text="" &gt;&lt;/asp:Label&gt;
                                  &lt;asp:TextBox Visible="false" ID="txtInput" runat="server" Text="" OnTextChanged="txtInput_TextChanged" CssClass="form-control" &gt;&lt;/asp:TextBox&gt;
                              &lt;/asp:Panel&gt;
                              &lt;div class="col-4 col-form-label"&gt;
                                  &lt;span&gt;&lt;asp:LinkButton ID="btnEditSave" runat="server" OnClick="btnEditSave_Click" /&gt;&lt;/span&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, when they click the button to edit, the first thing it does is it checks if something else is being edited, and if it is, to save it. The save method, changes the state of the component and should make it no longer editable.</p>
  
  <p>As in stand, the toggling alone works great, but calling the static variable's <code>Save()</code> method doesn't seem to affect it's state at all.</p>
  
  <p>Help would greatly be appreciated. I'm very new to webforms, so if I'm doing state management wrong, please tell me how to do it properly. Thanks.</p>